This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Adaptive goals

Make some elements that are not equally adaptive, so that when the size of the device changes, it is equally adaptive to the current device. Use a media query to set the font size of the HTML in proportion to the device, and then use REM for the page elements.

Rem actually develops adaptation solutions

  1. Dynamically calculate and set the font size of the HTML root tag based on the ratio of the design document to the width of the device (media query).
  2. In the CSS, the width, height, and relative position of design elements are converted to rem values in the same proportion.

Rem adaptation scheme mainstream technology

There are two main techniques:

  1. Less + Media query + REM
  2. flexible.js + rem

To compare

Both options exist, but option 2 is simpler.

1. Technical Option 1

  • less
  • Media queries
  • rem

Common dimensions and width of design draft:

equipment Common width
The iPhone 4.5 640px
iPhone 678 750px
Android The current market mainstream device size according to 1080px design

In general, we used one or two sets of renderings to fit most screens, ditching extreme screens or downgrading them elegantly, sacrificing some effects, and now basically 750px.

Dynamically set the font-size of the HTML tag

Assuming that the design is 750px and we divide the entire screen into 15 equal parts (it can be 20 equal parts, 10 equal parts, etc.), each HTML font size will be 50px.

When the device is 320px, the font size for each copy is 320/15 = 21.33px. That is:

Font size = screen width/number of copiesCopy the code

The main idea here is that regardless of the screen width, we want to make sure that the number of partitions is the same, let’s say 15. When we use REM to set the size of some page elements, each HTML font has the same size in proportion to the current screen, no matter how wide the screen is, and therefore the page elements have the same size in proportion to the entire screen. Page element box scale effect.

Code demo:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        /* Media query the HTML size under different screens, the design reference 750px, the screen width is divided into 15 equal */
        @media screen and (min-width: 320px) {
            html {
                font-size: 21.33 px.; }}@media screen and (min-width: 750px) {
            html {
                font-size: 50px; }}/* Set a 100*100 box */
        .box {
            width: 2rem;
            height: 2rem;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
Copy the code

2. Technical Option 2

  • flexible.js
  • rem

Mobile taobao team out of the simple and efficient mobile terminal adaptation library

There is no need to write media queries for different screens because js does the processing inside

Import the flexibility.js file

Through the 

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = no, initial - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0">
    <script src="js/flexible.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div></div>
</body>
</html>
Copy the code

The principle is to divide the current device into 10 equal parts, but the proportion is the same for different devices. All we need to do is determine the HTML text size of the current device. For example, if the current design is 750px, all you need to do is set the HTML text size to 75px (750px/10).

Rem value of the page element: the px value / 75 of the page element is left to flexible-.js to calculate.

If we need to set the maximum width to 750px, it will not change after this width, we need to set it in the CSS. Pay attention to use here! Important raises the priority. CSS styles in flexible. Js are inline.

index.css:

@media screen and (min-width: 750px) {
    html {
        font-size: 75px ! important; }}div {
    width: 1rem;
    height: 1rem;
    background-color: pink;
}
Copy the code

Effect:

VSCode plugin — cssrem

Converts between px and rem units in VSCode, And support WXSS.

  • Support Intellisense

    • px -> rem
    • rem -> px
    • px -> rpx(wechat mini program)
    • rpx -> px(wechat mini program)

  • Support mouse hover to display the conversion process

  • Support mark

Effect after cSSREM is enabled:

Sets a reference value for the HTML font size

In general, we need to set a reference value for the HTML font size.

  1. Click on vscode Settings

  1. Reset Root Font Size