The concept of things do not say, directly look at the scheme and the relevant library, who let us is the master tune library. I don’t know how to implement, but I’m good with libraries. Manual dog head 😃

1. media

Css3 Media query: Compile CSS styles suitable for devices with different resolutions through media query. Usually need to UI out of different sizes of the design draft, and then corresponding development. This scheme is not very common and is used in grid systems.

@media screen and (max-width: 320px) {... CSS styles for iphone4@media screen and (max-width: 375px) {... Adapter iphone6 /7/8CSS style}@media screen and (max-width: 414px) {... Adapter iphone6 /7/8Plus CSS style}Copy the code

Disadvantages:

  1. The workload is large, and the later maintenance is also large.
  2. pc h5Can achieve the effect.

Advantages:

  1. I just need to modify itcss, can achieve the effect.
  2. It will automatically adjust according to the screen

Commonly used library:

Bootsrtap, and rasterization systems for various UI frameworks. Here’s an example of rasterization for ANTD. And element, of course.

2. rem

Rem is the font-size relative to the browser HTML elements. Adapt by changing the FONT size of the HTML. They are often paired with viewPorts to dynamically set the viewport.

Commonly used library:

Hotcss Flexible. Js, PostCSs-PxtoREM is mainly used in engineering projects, you write PX into REM, Px2REM

Advantages:

  1. Good adaptation, browser support.

Disadvantages:

  1. You have to do calculations, and now a lot of them can be directly exportedremDesign draft for the unit.
  2. If the setting of the value of the decimal point is not easy to understand, and there is a certain error, not intuitive.

4. vw/vhThe percentage /

The difference with REM is that the units are vw over vh, which is relative to viewport to determine the size. The percentage is compared to VW/VH and REM, and is based on the parent element, not the root element. In actual use, you need to calculate the percentage of the layout.

Commonly used library:

Postcss-px-to-viewport is the same as postCSs-pxtorem, which converts units to VW /vh.

Advantages:

  1. No human passage is requiredjsOperation to change the size of the root element, directly usingcssNew unit, automatic.

Disadvantages:

  1. Direct conversion of the percentage may appear decimal, calculation is inconvenient and error. It’s not intuitive.
  2. Compatibility is not thereremOk.

5. css3 transform / zoom

This should be a new solution for now. Css3’s Transform is used to scale the desired container. Note that the Zoom attribute is not supported on Firfox. This scheme is commonly used on large PC screens.

Common library: need to achieve their own implementation, implementation is relatively simple, obtain the width of the visible area of the web page height, go in to calculate the scaling ratio, and finally add to the need to scale the container

Advantages:

  1. Completely controlled

Disadvantages:

  1. Browser support requiredcss3
  2. Used in thefixedThere is a problem with the positioned element