This is a series of three articles:

  • Mobile Adaptation – Basics

  • Mobile adaptation – Practice

  • Mobile adaptation – Rem layout

In front of writing a mobile end adaptation practice article, very long, too much content, easy to see messy, write a familiar understandable version.

Why adaptive?

For example, for a mobile page, the designer gives the canvas 750 wide, and a yellow block in the canvas is 702 x 300, and is centered in the artboard. We want the scale in any device to be the same as in the artwork, scaled equally to the width of the layout viewport.

On mobile we usually set the width of the layout viewport to the width of the device, meaning that the area of the content is displayed on the screen of the device.

<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

But the width of different devices is different, so the width of the layout viewport is also different. For example, the iPhone6 layout viewport is 375 wide, and the iPhone6 Plus layout viewport is 414 wide.

For a visual art with a given canvas width of 750, if rendered on an iPhone 6 with a layout viewport width of 375, we can divide the pixel value of the elements in the visual art by 2, with the following code:

.box{
    width: 351px;
    height: 150px;
    margin-top: 40px;
    background: #F5A623;
}
Copy the code

Then the presentation in iPhone 6 is like the picture on the right, which is consistent with the visual layout of the picture on the left.

But the same code appears differently on the iPhone 6 Plus, with more space between the sides. Because the layout of the iPhone 6 Plus has a wider viewport than the iPhone 6, the rectangular frame remains the same, at 315 x 150.

For the visual art with a given canvas width of 750, if it is presented on an iPhone 6 Plus device with a layout viewport width of 414, we can divide the pixel value of the elements in the visual art by (750/414) proportionally, namely:

.box{
    width: 387.5 px.;
    height: 165.6 px.;
    margin-top: 44.2 px.;
    background: #F5A623;
}
Copy the code

Page rendering can also look like the visual draft.

Our appeal is that we hope to use the same CSS code in different widths of the device to show the same effect as the visual draft. In popular terms, that is, according to the size ratio of the elements in the visual draft and the canvas on different devices, so as to achieve adaptive effect on different devices.

Use Rem layout to solve adaptive problems

How to use the same CSS code to scale elements proportionally to the layout viewport width? We combine CSS with the relative unit REM, where the pixel value of the REM unit is font size relative to the root element (HTML element). For example, if the font size of the HTML is 100px and the width of an element in the CSS style is 2rem, the width of the element in the page will be 200px.

Find a relationship based on the scale of the elements in the visual art:

Visual element size/Visual canvas width = (REM value * HTML element font-size)/layout viewport width = REM value * (HTML element font-size/layout viewport width) = REM value/(layout viewport width / Font size for HTML elementsCopy the code

If:

Width of the layout viewport/font size of the HTML element = constant NCopy the code

You can use the same CSS code to implement adaptation on any device.

Rem value = N * (Visual element size/visual canvas width)Copy the code

Therefore, we only need to determine a value of N and then complete two steps to achieve self-adaptation:

  • Step 1: Dynamically set the font size of the HTML element = layout viewport width/N
  • Step 2: Convert CSS pixel values of exported elements into REM units: REM value = N * (size of elements/width of canvas)

If your visual canvas width is 750, you can set N = 7.5 to facilitate the calculation of the REM value, so that you can get the CSS pixel value in REM units by dividing the size of the visual canvas by 100.