the
px
px is the abbreviation of pixel, a relative length unit, and a basic unit commonly used in web design. Pixel px is relative to the screen resolution of the monitor
the
em
em is a relative unit of length. Relative to the font size of the text within the current object (the reference is the font-size of the parent element)
If the font size of the current parent element is not set, it will be relative to the browser’s default font size
Features:
1. The value of em is not fixed;
2. em will inherit the font size of the parent element
the
rem
rem is a relative unit added by CSS3, and rem is a length unit calculated relative to the font size (font-size) of the HTML root element
If you do not set the font size of html, it will use the default font size of the browser, usually 16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
/*A basic font size of 62.5% is defined in the root element (that is, 10px. Setting this value is mainly convenient for calculation. If it is not set, it will be based on “16px”)*/
The advantage is that you only need to set the size of the root directory to adjust the proportion of the entire page
rem compatibility: rem is already supported in all browsers except IE8 and earlier
The difference between em and rem:
rem is the font size relative to the root element (html), while em is the font size relative to its parent element
Rules for using both:
- If this property is measured according to its font-size, use em
- Rem is used for all other attributes
A conversion tool for px, em, rem units is provided here: http://pxtoem.com/
the
vw, vh
The four units of vw, vh, vmax, and vmin are based on the viewport
vw is relative to the width of the viewport (viewport), and the length is equal to 1/100 of the viewport width
If the width of the browser is 200px, then 1vw is equal to 2px (200px/100)
vh is relative to the height of the viewport, and the length is equal to 1/100 of the height of the viewport
If the height of the browser is 500px, then 1vh is equal to 5px (500px/100)
vmin and vmax are the minimum or maximum relative to the height and width of the viewport
/* If the height of the browser is 300px and the width is 500px, then 1vmin is 3px, and 1vmax is 5px; if the height of the browser is 800px, and the width is 1080px, then 1vmin is also 8px, and 1vmax is also 10.8px */
the
Other units:
% (percentage)
Generally speaking, relative to the parent element
1. For ordinary positioning elements, it is the parent element we understand
2. For position: absolute; elements are relative to the positioned parent element
3. For position: fixed; elements are relative to ViewPort (visual window)
the
vm
css3 new units, relative to the viewport’s width or height, whichever is smaller
The smallest of them is divided into 100 units of vm
For example: browser height 900px, width 1200px, take the minimum browser height, 1 vm = 900px/100 = 9 px
Disadvantages: poor compatibility
the
common problem:
1. If you use em to set the text size, what should you pay attention to?
Pay attention to the font size of the parent element, because the em is set according to the size of the parent element.
For example, it is also 1.5em, if the parent element is 20, then 1.5em is 30px. If the parent element is 30px, 1.5em is 45px (especially in multiple div nesting)
2. In what scenarios are pc pt ch generally used?
These are basically not used in our web design, and will be useful in typesetting
3. How to make 1rem=10px
Just set HTML{font-size: 62.5%;}
4. If the parent element does not specify a height, what is the percentage height of the child element?
It will follow the actual height of the child element, and setting the percentage will have no effect
the
the
About us:
Infocode Lanchang Information Technology Co., Ltd. has successfully provided high-quality services for many Fortune 500 companies and other famous brands in the world. It is your reliable Internet development provider.
Serving customers throughout Beijing, Shanghai, Hangzhou, Shenzhen, Guangzhou, Tianjin, Qingdao, Nanjing, Ningbo, Suzhou, Wuxi, Xiamen, Chongqing, Xi’an and other large and medium-sized cities and regions Provide you with: H5 development, small program development, H5 outsourcing, WeChat development, H5 mall development, small program mall development, website development outsourcing, H5 game development, small program development outsourcing, Small program design, APP development outsourcing, UI design, SEO optimization, SEO outsourcing, video post-production and other high-quality services
