Adaptive layout scheme

Adaptation of different models with different screen sizes is the key breakthrough object of front-end development. Adaptive layout schemes are as follows:

  • Adaptive unit
    • Em, REM (Web side), RPX (applet side), VW, VH (relative to window size)

Unit differences

  • Px: Pixel. Absolute units. Pixel PX is relative to the screen resolution of the display, 1px is equal to the size of a pixel point, is a computer system digital image length unit.
  • Em: Relative toFont size of the parent element, so it is not a fixed value. If the font size of the current inline text has not been manually set, it is relative toDefault font size for the browser.
  • Rem: is the font size of the root HTML element (1rem equals font size)
  • Vw: 1vw equals viewportThe width of thethe1%.
  • Vh: 1vh equals the viewporthighlythe1%.

Note: the “viewport” in viewport unit, PC side refers to the viewport area of the browser (excluding toolbar and button web browser); Mobile refers to the Layout Viewport in Viewport

  • Media Query CSS series — Media Query (used to detect media devices)
  • Flex Layout CSS series — Flex layout
  • Grid Layout CSS series — Grid layout
  • The use of calc ()

Calec () is a new feature in CSS3 that dynamically calculates and specifies element lengths, margins, and so on

Calc () can set dynamic values for attributes like border, margin, pading, font-size, and width. You can give a div element a width or height using percentage, em, px, and REM values, such as “width:calc(50% + 2em)”.

Some features of calc() :

  • Use “+”, “-“, “*” and “/” four operations;
  • You can use percentages, PX, EM, rem, etc.
  • A mixture of units can be used for calculation;
  • For example, “widht: calc(12%+5em)” is not written with Spaces.
  • When an expression contains asterisks (*) and slashes (/), it is recommended to leave Spaces before and after the expression