Why mobile adaptation?

Nowadays, Web pages need to run on mobile as well as on PC. There are many mobile devices, so we often need to make a mobile adaptation of the page to make it work perfectly on different terminals.

Adaptation scheme

1. Rem adaptation

The principle of

Rem is a relative unit added to CSS3. When using REM to set the font size for an element, it is relative to the font size of the HTML root element. For example, if you set font size to 16px for HTML and font size to 1rem for HTML div elements, that 1rem will also be 16px.

The principle of REM adaptation is the scale of layout, we can dynamically control the size of font size in HTML to change the size of REM.

Implementation method

1. Set the viewport

To configure the viewport on mobile, set a meta tag:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
Copy the code

Where, width is the viewport width, height is the viewport height, initial-scale is the initial scaling value, maximum-scale and minimum-scale are the maximum scaling and minimum scaling, respectively. User-scalable refers to whether users are allowed to scale the page manually. The meta tag example above sets scale to a fixed size of 1 viewport.

If we do not set it, the browser defaults to viewPort =980 and initial-scale is null

Let’s look at the difference between setting viewPort and not setting viewPort:

Don’t set up:

Settings:

Also set the width and height of the square to 300px. You can see that when you set the viewPort, there will be a zoom effect.

We can also scale the ViewPort based on the value of devicePixelRatio, as follows:

let viewport = document.querySelector('meta[name=viewport]')
let dpr = window.devicePixelRatio || 1
let scale = 1 / dpr
viewport.setAttribute(
    "content"."width=device-width" +
    ",initial-scale=" +
    scale +
    ", maximum-scale=" +
    scale +
    ", minimum-scale=" +
    scale +
    ", user-scalable=no"
)
Copy the code

This allows elements to scale differently on different devices

Disadvantages: Elements that do not need to be scaled, such as borders, will also be scaled

Note:

  1. The ViewPort tag is only valid for mobile browsers, not PC browsers.
  2. When scaling is 100%, logical pixels = CSS pixel width = ideal viewport width = layout viewport width.
  3. Setting initial-scale or Width alone is incompatible, so the best way to set the layout viewport as the ideal viewport is to set both properties together.
  4. Manual scaling can be forcibly enabled in Android Chrome even with User-Scalable = no.
2. Dynamically set REM

Use js to get the width of the device to dynamically set the font size to change with the viewport size as follows:

  1. Get the design dimensions, such as 750px
  2. Convert the design draft notes
  3. Rem is used if scaling is required, and PX is used if scaling is not required, such as border shadows
  • The code is as follows:
const WIDTH = 750// Width of design draft
function setRemUnit() {
  let rem = 100*screen.width/WIDTH
  document.documentElement.style.fontSize = `${rem}px`
}
setRemUnit()
Copy the code

Look at the difference between no Settings and with Settings:

In addition to the font, the width and height can be set to achieve the effect of scaling.

disadvantages

  1. CSS and JS code have a certain degree of coupling
  2. Code that changes font size must precede CSS styles

2. Vw adaptation

If we want a unit that doesn’t require JS and CSS to be coupled together, vw/ VH is a good choice.

Vw: view width, refers to the percentage of the viewport width, for example: 1vw = 1% of the viewport width

Vh: view height: indicates the percentage of the viewport height, for example, 1vh = 1% of the viewport height

Vmin: The value of vmin is the smaller value of the current VW and VH

Vmax: The value of vmax is the current larger value of VW and VH

It is also easy to use. For example, if I assume that the design is 1080px wide, 100vw = 1080px, that is, 1vw = 10.8px. We can directly convert the PX value on the design drawing to the corresponding VW value. We can also use the PostCSS plugin postCSS-px-to-viewport to write px directly in the code.

Example: Set a div that is 50% wide and 50% high

.box {
  width: 50vw;
  height: 50vh;
  background-color: red;
}
Copy the code

3. Rem cooperated with VW

We can also use VW to dynamically adjust the font size of the HTML, use rem units for element layouts, and use the media query @media to limit the font size of the root element by setting font size to PX when exceeding a certain width.

@media screen and (max-width: 320px) {
      html {
          font-size: 64px; }} @media screen and (min-width: 540px) {
        html {
            font-size: 108px; }}html {
  font-size: 20vw;
}
.box {
    max-width: 540px;
    min-width: 320px;
}
Copy the code

conclusion

  • Px +flex+ percentage for news, community, etc

    • Example: Ctrip (m.ctrip.com/html5/)

  • Scenarios where there are many visual graphic components, or where the position of the components is relatively dependent: VW + REM

    • Example: jingdong (m.jd.com/)
    • Netease (3g.163.com/touch/)