Use Rem layout to achieve adaptive

I have written an article about mobile adaptation before. It is very long and contains too much content, which makes it confusing to read. I have rewritten a more understandable version.

Why adapt?

For example, for a mobile page, the designer gives a visual draft canvas with a width of 750, and a yellow block in the visual draft has a size of 702 x 300 and is centered in the artboard. We hope that the presentation ratio in any device is the same as that in the visual draft, and it is scaled proportionally according to the layout viewport width.

On mobile devices, we usually set the layout viewport width = device width, that is, the area where the content is presented is within the device screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

But different devices have different widths, which makes the width of the layout viewport also different. For example, the layout viewport width of iPhone 6 is 375, and the layout viewport width of iPhone6 ​​Plus is 414.

For a given visual draft with a canvas width of 750, if it is presented on an iPhone 6 device with a layout viewport width of 375, we can divide the pixel value of the elements in the visual draft by 2, as follows:

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

The presentation on iPhone 6 is as shown on the right, which is consistent with the layout of the visual draft on the left.

But the same code is displayed differently on iPhone 6 Plus, with larger spacing on both sides. Because the layout viewport of iPhone 6 Plus is wider than that of iPhone 6, the size of the rectangular box has not changed and is still 315 x 150.

For a given visual with a canvas width of 750, if it is rendered 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 proportionally by (750 / 414), that is:

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

The page presentation effect can also be the same as the visual draft.

In order to achieve the same effect as the visual draft in pages with different device widths (different viewport widths), different CSS pixel values ​​need to be written. Our goal is to use the same CSS code to achieve the same effect as the visual draft on devices of different widths. In layman's terms, the size ratio of the elements and the canvas in the visual draft should be scaled proportionally on different devices to achieve an adaptive effect on different devices.

Use Rem layout to solve adaptive problems

How can I use the same CSS code to make the element size scale proportionally with the proportion in the visual draft as the layout viewport width changes? We combine the characteristics of the relative unit rem in CSS. The pixel value of the rem unit is relative to the font-size of the root element (HTML element). For example: if the font-size of HTML is 100px and the width of an element is set to 2rem in the CSS style, then the width of this element on the page will be 200px.

According to the proportional scaling of the elements in the visual draft, we can find such a relationship:

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 / HTML element font-size)

if:

Layout viewport width/HTML element font-size = fixed value N

You can use the same CSS code to achieve adaptability in any device.

rem value = N * (design element size / design canvas width)

Therefore, we only need to determine an N value and 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 the CSS pixel values ​​of the elements exported from the visual draft into rem units: rem value = N * (visual draft element size / visual draft canvas width)

If the width of your draft canvas is 750, in order to facilitate the calculation of rem values, you can choose to set N = 7.5. In this way, you only need to divide the size value in the draft by 100 to get the CSS pixel value in rem units.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.