Adevices not to mention potential future devices with new screen dimensions. If youre going to follow this approach youll need to regularly test your pages across different screens and adjust your breakpoints accordingly. Or you could try another approach fluid text. Well discuss that next. Method 2 Fluid Text In fluid web design the size of page elements is set proportional to the width of the screen or browser window. While breakpoints only change the font size at defined increments fluid text scales continuously as the screen dimensions change to fit the viewing device.of not needing to specify screen dimensions in your CSS rules. Fluid text uses the vw unit. As mentioned.
Problems when using vw by itself as it can cause text to blow up massively or shrink to microscopic levels. With some basic math however we can control the behavior of vw. To make fluid text well be combining Digital Marketing Service vw and rem units using the CSS calc function. calc lets us conduct arithmetic operations in CSS even between different units. Heres the HTML and CSS HTML pIm a paragraph of fluid text. Change the width of your browser window and see how I reactp CSS html fontsize 16px p fontsize calc1rem 1vw First we set the font size of the root element.
Again this is standard. Then we use the calc function to make things fluid. With this code the font inside p will scale onetoone with the viewport. The addition of 1rem ensures that the text will always be at least 16 pixels even when the viewport is zero pixels wide. This keeps the text at a readable size on all screens. Open this example in a new tab and try resizing it yourself. However this method comes with tradeoffs as well. Unlike using breakpoints your font sizes will be more approximate and not exactly defined.
發表於 2023-12-27 11:35:14
