Mobile terminal adaptation

1: Mobile terminal adaptation reason:

In order to make the page compatible with different screen sizes, the size of fonts / elements can change dynamically

Note:

The page is developed according to the standard of the design draft, and some contents on the mobile phone are scaled proportionally according to the screen width,

Some contents shall be changed as required:

CSS uses converted units (rem, vw relative units) for elements that need to be scaled proportionally
For elements that do not need to be scaled, such as border shadows, use the fixed unit px

2: Adaptation scheme:

1.viewport adaptation

The page is developed according to the design draft standard (750px width). After writing, the page and elements are automatically reduced to adapt to the 375 width screen

Set the following code in the head

<meta name="viewport" content="width=750,initial-scale=0.5">

Initial scale = width of screen / width of design draft

In order to adapt to other screens, you need to dynamically set the value of initial scale

<head>
  <script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if (!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      }
      meta.setAttribute('content',content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter //Execute again when the screen flips
  </script>
</head>

The disadvantage is the edge problem. Under different sizes, the thickness of the edge is different (after proportional scaling). All elements are proportional scaling, and the actual display effect may not be very good

2.vw adaptation (partial proportional scaling)

The developer gets the design draft (assuming that the size of the design draft is 750px, and the element annotation of the design draft is based on this width annotation)
Start development, convert the annotation of the design draft, and replace PX with vw. For example, the font size of page element is 32px, and vw is (100/750)*32 vw
CSS uses the converted units for elements that need to be scaled proportionally
For elements that do not need to be scaled, such as border shadows, use the fixed unit px

For conversion, for development convenience, use custom attributes and CSS variables

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750
    //: root {-- width: 0.133333} how much is 1 pixel equal to vw
    document.documentElement.style.setProperty('--width', (100 / WIDTH)) 
  </script>
</head>

Note that at this time, do not set scaling in meta

It can be written in the business code

header {
  font-size: calc(28vw * var(--width))
}

Enables on-demand scaling

3.rem adaptation

The developer gets the design draft (assuming that the size of the design draft is 750px, and the element mark of the design draft is marked based on this width)
Start development and convert the annotation of the design draft
CSS uses the converted units for elements that need to be scaled proportionally
For elements that do not need to be scaled, such as border shadows, use the fixed unit px

Assuming that a font size of the design draft is 40px, the font size on the mobile phone screen should be 420/750*40 = 22.4px (good experience). When converted to REM (relative to the html root node, assuming that the font size of html = 100px), the font size is 0.224 rem

When writing styles, set the corresponding font to 0.224 rem, and convert the dimensions of other elements

But there are problems

For example, the label of the design draft is 40px, and the calculation has to be done when writing the page, which is very troublesome (all have to be calculated)

Can you specify that when you see 40px, you should write 40/100 = 0.4 rem, so you can know how much to write (without calculation). At this time, the font size of html cannot be 100px, it should be (420*100)/750 = 56px, and 100 is the parameter we want to specify

Set the font size value of html according to different screen widths

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750 //Design draft size
    const setView = () => {
      document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
    }
    window.onorientationchange = setView
    setView()
  </script>
</head>

CSS uses the converted units for elements that need to be scaled proportionally

header {
  font-size: .28rem;
}

For elements that do not need to be scaled, such as border shadows, use the fixed unit px

header > span.active {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

Assuming that the font size of html = 1px, you can write 28 rem, which is more convenient. However, the browser has restrictions on the font size. If it is set to 1px, it will be invalid in the browser. A calculation will be made with the minimum value of 12px (or other values), and a very exaggerated result will be obtained. Therefore, you can write html larger

4. Media query adaptation

That is: list the font sizes under each size one by one with media query

5.JS for adaptation

js is used to dynamically modify the font size of the root element node, and the function to obtain the font is called again when the page size changes

You need to pay attention to the design draft size and standard given by the ui

Tags: Front-end css3

Posted on Sat, 06 Nov 2021 00:13:43 -0400 by hongco

Programmer Help