When working on a responsive web, can I use % or vw units for font size?-CodePudding

Do I have to use the font size in em or rem units? Can't I use the %vw units?

The width of the speech bubble is % unit, so if the browser size decreases, the font size is fixed, it cannot match the speech bubble. So, I'm going to use vw unit of the font-size. Is this the recommended usage? Or should we avoid doing this if possible? Should I use em or rem units?

I used the % unit, so even if it's 100%, the letters are too small. If I use the vw unit, the font size comes out exactly, but if I use the vw unit, will there be a problem if the horizontal resolution is over 1920 and bigger? The max-width value of the body tag is 1920px on the site I make.

CodePudding user response：

See the specification:

Name: font-size
Value: <absolute-size> | <relative-size> | <length-percentage [0,∞]> | math

<absolute-size>

An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the user agent. Possible values are:
[ xx-small | x-small | small | medium | large | x-large | xx-large ] 
<relative-size>

A <relative-size> keyword is interpreted relative to the table of font sizes and the computed ‘font-size’ of the parent element. Possible values are:
[ larger | smaller ]
For example, if the parent element has a font size of ‘medium’, a value of ‘larger’ will make the font size of the current element be ‘large’. If the parent element's size is not close to a table entry, the user agent is free to interpolate between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords.

<length-percentage>

A length value [CSS-VALUES] specifies an absolute font size (independent of the user agent's font table). Negative lengths are invalid.

A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in ems, leads to more robust and cascadable style sheets. Negative percentages are invalid.

Units relative to the viewport size are not supported.

CodePudding user response：

Percent (%) as css font size: 100% is equal to the current font size. Think of it this way: 50% is 0.5 times larger ( half smaller ) and 150% is 150 percent of the font size.

<p style="font-size:100%;">Font 100%</p>
<p style="font-size:50%;">Font 50%.</p>
<p style="font-size:150%;">Font 150%.</p>

For a responsive font you can use viewport width/height,

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>