Regarding font responsiveness settings in CSS_html/css_WEB-ITnose

In the responsive design of the page, it is often necessary to display fonts of different sizes according to the screen resolution. The usual approach is 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 also make the fonts automatically in the following way Adapt to screen resolution.

<strong>1vw = viewport宽度的1%1vh = viewport高度的1%1vmin = 1vw或者1vh中较小的值1vmax = 1vw或者1vh中较大的值</strong>

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

h1 {  font-size: 5.9vw;}h2 {  font-size: 3.0vh;}p {  font-size: 2vmin;}

What is viewport?

Viewport is a newly added meta tag in HTML5. Its main function is to optimize the display of mobile client browsers. By setting the attribute value of the viewport, you can control how the current page is displayed in the mobile browser by default. The following is a commonly used viewport meta tag setting item for pages optimized for mobile web pages:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″></meta>

If you want the page to support responsive design, you need to add viewport meta to the page mark. See Responsive Design in Bootstrap for details.

The complete viewport syntax is as follows:

<!-- html document --><meta 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: Control the height of the viewport, you can specify a fixed value, or device- height represents the height of the device (the unit is the pixel value at 100% zoom).

width: corresponds to height, indicating the width of the viewport. devise-width represents the height of the device.

initial-scale: The initial scaling ratio of the page, the value is allowed to be a decimal, indicating a multiple of the current page size. For example, 2.0 means that the page will be enlarged 2 times in its initial state.

minimum-scale: The minimum allowed scaling ratio, the value is allowed to be a decimal, indicating the minimum multiple that the page can be displayed at. For example, 2.0 means that the page cannot be reduced to less than 2 times for display.

maxmium-scale: corresponds to minimum-scale, indicating the maximum allowed scaling ratio.

user-scalable: Whether the user is allowed to zoom the page. The default value is yes. When set to no, minimum-scale and maximum-scale are invalid.

target-densitydpi: Specify the dpi under which the page is displayed. Screen pixel density is determined by screen resolution, 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), and high pixel density (high-dpi). A low pixel density screen has fewer pixels per inch, while a high pixel density screen has more pixels per inch. Android Browser and WebView default screens are medium pixel density. You can also directly specify a specific dpi value, the allowed range of this value is between 70-400. device-dpi means to display the page using the device's default dpi.

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

Comparison between several different units in CSS

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

em: Relative length unit. The font size equivalent to the text within the current object, or relative to the browser's default font size if the current font size for inline text is not considered set. The value of em is not fixed, it inherits the font size of the parent element. All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

rem: A new relative unit in CSS3. The main difference from em is that when using rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer. Currently, all browsers except IE8 and earlier support rem. For browsers that do not support it, the solution is very simple, which is to write an additional absolute unit statement. These browsers ignore font sizes set with rem.

pt: A unit commonly used in the printing industry, generally used for page printing and typesetting, which means pound.

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

vw/vh/vmin/vmax: As introduced above, it indicates the size of the font relative to the height or width of the viewport.