Settings for font response styles in CSS

In a page-responsive design, it is often necessary to display different sizes of fonts based on the screen resolution. It is common practice to specify different font styles for different resolutions through media queries, for example:

Body {       font-size: 22px;} H1 {       font-size:44px;} @media (min-width:768) {       body       {           font-size: 17px;        }        H1       {           font-size:24px;       } }

In addition, we can adapt the font to screen resolution in the following way.

1VW = Viewport width of 1%1VH = viewport height of 1%1vmin = 1VW or 1vh smaller value 1vmax = 1VW or 1VH larger value

For example, we can define the following styles in the style sheet:

{  font-size: 5.9vw;}  {  font-size: 3.0VH;}  {  font-size: 2vmin;}

What is viewport?

Viewport is a newly added meta tag in HTML5, whose main purpose is to optimize the display of the mobile client's browser. By setting the value of the Viewport property, you can control what way the current page defaults to displaying the page in the browser on the mobile side. Here is a common set of viewport meta tags for pages that have been optimized for mobile pages:

<name   content initial-scale  Maximum-scale=1″></meta>

If you want the page to support responsive design, you need to add the viewport meta tag to the page. See the responsive design in bootstrap.

The complete viewport syntax is as follows:

<!---<name= "Viewport"        Content   = "            height = [Pixel_value | device-height],            width = [Pixel_value | device-width],            Initial-scale = Float_value,            minimum-scale = float_value,            maximum-scale = float_value,            user-scalable = [yes | no], 
    target-densitydpi = [Dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]        "/>

Height : controls the altitude of the viewport, you can specify a fixed value, or device-height to indicate the height of the device (in pixels when scaled by 100%).

Width : corresponds to height, which indicates the width of the viewport. Devive-width indicates the height of the device.

Initial-scale: The initial scale of the page, the value allowed as a decimal, representing a multiple of the current page size. For example, 2.0 means that the initial state of the page will be magnified twice times.

Minimum-scale: The minimum allowable scale, the value is allowed as a decimal, indicating the minimum number of times the page can be displayed in multiples. For example, 2.0 indicates that the page cannot be scaled down to twice times the display.

Maxmium-scale: corresponds to Minimun-scale, which indicates the maximum allowable scaling ratio.

user-scalable: Whether the user is allowed to scale the page. The default value is Yes, and Minimum-scale and Maximum-scale are not valid when set to No.

target-densitydpi: Specifies the DPI under which the page is displayed. Screen pixel density is determined by the screen resolution, which is usually defined as the number of dots per inch, or dpi. Android supports three DPI settings: Low pixel density (low-dpi), Medium pixel density (medium-dpi), high pixel density (high-dpi). Low pixel density screens have fewer pixel dots per inch, while high pixel density screens have more pixels per inch. The default screen for Android browser and webview is medium pixel density. You can also specify a specific DPI value directly, which allows a range of 70-400. DEVICE-DPI indicates that the page is displayed at the device's default DPI.

Note: All scaling values must be within the range of 0.01-10, otherwise invalid.

Comparison of several different units in CSS

px: pixels (Pixel). Relative length units, the size is determined by the screen resolution.

em: relative length units. The font size equivalent to the text within the current object, relative to the browser's default font size, if the font size of the current inline text is not considered set. The value of EM is not fixed, it inherits the font size of the parent element. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.

REM: CSS3 a new relative unit. The main difference from EM is that when you use REM to set the font size for an element, it is still relative size, but the opposite is the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM.

PT: The unit commonly used in the printing industry, generally used for page printing and typesetting, that is, the meaning of pounds.

%: In addition we can use percentages to specify the size, which represents a multiple of the current font relative to the default font size of the browser. This unit is also frequently used in page-responsive design.

Vw/vh/vmin/vmax: described above, indicates the size of the font relative to viewport height or width.

Settings for font response styles in CSS