preface

To understand mobile layout compatibility, take a look at REM.

This article mainly introduces:

- Rem foundation, - contrast with EM - JS solution - Flexable. Js - SCSS and less compatible approachCopy the code

Rem-Based Layout

Take a look at REM compatibility (which is supported by almost all major browsers) -caniuse.com/#feat=rem

font size of the root element

  • When we specify the font size for an HTML root element, we specify 2rem for any other page element, which is twice the size of the font element
  • Look at the following example

/* * Base element: 12px */
html {font-size: 12px; }h1 { font-size: 2rem; } /* 2 × 12px = 24px */
p { font-size: 1.5 rem; }/* 1.5 × 12px = 18px */
div {width: 20rem; }/* 20 * 12px = 240px*/


/* * Base element: 16px */
html {font-size: 16px; }h1 { font-size: 2rem; } /* 2 × 16px = 32px */
p { font-size: 1.5 rem; }/* 1.5 × 16px = 24px */
div {width: 20rem; }/* 20 * 16px = 320px*/
Copy the code

Let’s look at the difference between REM and EM

unit define The characteristics of
rem font size of the root element Base on the font size of the root element
em font size of the element Base on the font size of your element

Rem is a fixed reference value that can be used at any time

How do you calculate REM

Read the screen width in JavaScript, then calculate the size and set the font size for the root element

const oHtml = document.getElementByTagName('html') [0];

const width = oHtml.clientWidth;

// The base pixel of the 320px screen is 12px
oHtml.style.fontSize = 12 * (width / 320) + "px";
Copy the code

  • Font-size: 14.0625px for iphone8 (375px) and 15.525px for iphone8p.

  • Font size 1.7066rem on iphone8 (375px) will have the same effect as font size 24px (24/14.0625 = 1.7066).

  • The advantage of using JS to get screen widths is that it is 100% compatible with all model widths, since the base dimensions of the elements are computed directly.

Media queries

Since the size of the element is set according to the width of the screen, most students should think of CSS3 media query to solve this problem, in fact, this method is one of our most commonly used solutions.

@media screen and (min-width: 375px) {html {
        font-size: 14.0625 px.; }}@media screen and (min-width: 360px) {html {
        font-size: 13.5 px.; }}@media screen and (min-width: 320px) {html {
        font-size: 12px; }}html {
    font-size: 16px;
}
Copy the code

Use the SASS and LESS methods to better use REM

  • Let’s start with a font size method
// css 
html {
  font-size: 62.5%; Font: 10px */
}

// less
.font-size(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 10);
  font-size: ~"@{pxValue}px"; 
  font-size: ~"@{remValue}rem";
}

// sass
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}
Copy the code
  • Specific usage
// less
p {
  .font-size(13);
}

// sass
p {
  @include font-size(13);
}
Copy the code

Rem adaptive JS

  • . Caibaojian.com/simple-flex…
  • The above article is very good to use JS solution px- >rem

application

  • It needs to be compatible with most mobile applications with more text and pictures, such as Taobao, novel.com and other applications can use this method

One of the biggest problems we encounter with REM is that we are used to using PX to define the style, and the transformation process from PX to REM requires calculation. When you first get into REM, you may need px to define the page layout, and then calculate and replace rem units one by one.

reference

  • Every – layout. Dev/layouts/sta…
  • Snook. Ca/archives/ht…