1. Px: unit of relative length

  • Screen resolution relative to the monitor

2. Rem:Unit of relative length

  • Font-size Multiples of the computed value for the root element (that is, the HTML element)
html{
  font-size:14px; then14px=1rem  28px=2remI.e., n p = n /14 rem
}
h3{
    font-size=2rem; // Convert to px2*12=24px
}
Copy the code

3. The vw and vh

  • Mobile development is a good choice
  • Width and height of VW and VH relative to viewport
  • 1vw is equal to 1% of the viewport width; 1vh is equal to 1% of the viewport height
  • 1vh is equal to 1/100 of the viewport height; One vw is equal to 1/100 of the viewport width
  • Browser height 950px, width 1920px, 1 vh = 950px/100 = 9.5px, 1vw = 1920px/100 = 19.2px

viewport

  • On the desktop side, viewport refers to the viewport area of the browser on the desktop side

  • On mobile, it involves 3 viewports: Layout Viewport, Visual Viewport and Ideal Viewport.

  • Viewport unit of the “viewport”, desktop refers to the browser viewport area; The mobile side is a Layout in Viewport,

  • “Visual area” refers to the size of the viewing area for the inside of a browser, the window. The innerWidth/window. The innerHeight size, do not include the task bar at the bottom of the title bar and toolbar browser area size

4. Em: unit of relative length

  • Font size relative to the text in the current object

  • If the font size of the text in the current object line has not been manually set, it is relative to the browser’s default font size

  • The em value is not fixed; Em inherits the font size of the parent element

  • Assuming the current default font size is 14px, n em is n times the size of 14px:

body{
    font-size:14px; / / setbodyThe default font is14pxthen14px=1em  28px=2emI.e., n p = n /14 em
}
h3{
    font-size:3em; // Convert to px3*14=42px} // If the font size of the text in the current object line is set to12px, is as follows:h2{
    font-size:12px;
    h3{
        font-size:3em; // Convert to px3*12=36px}}Copy the code