rem Adaptation Layout


1. rem base

rem units

rem (root em) is a relative unit, similar to em, which is the font size of the parent element. The difference is that rem is based on the font size relative to the html element.

For example, the root element (html) sets font-size=12px; Set width:2rem for non-root elements; PX means 24px.

Introduction of px, em, rem differences

/* Root html font-size set to 12px 
	Determines the unit-to-value ratio (at this point: 12px = 1rem)
	All labels on a page that use rem units are based on this ratio
html {
   font-size: 12px;
The div's font size is 24px */       
div {
    font-size: 2rem;

Advantage of rem: The text size of the parent element may not be the same, but the entire page has only one html, which is a good way to control the element size of the entire page.


cssrem:px conversion rem vscode plugin

  • Use Points of Attention

    Simple to use, prompt box prompts conversion to rem when css pixel units are re-entered

    The default html font size is 16px. If the current device's (design draft) word html font-size is not 16px, manually modify the size of Cssrem:Root Font Size in the vscoe settings.

2. rem Adaptation Scheme

rem Actual Development Adaptation Scheme

(1) Compute and set the font-size of html root tag dynamically by using CSS3 media query according to the ratio of design draft to device width.
(2) In CSS, the width, height and relative position of the design draft elements are converted to rem values in the same proportion.

rem Adaptation Scheme Technology Usage (Market Mainstream 2019)

Option 1:

  • less
  • Media Query
  • rem

Solution ideas:

  1. Determine size of design draft

    Design Draft Common Size Width

    equipment Common Width
    iphone4\5 640px
    iphone6\7\8 750px
    Android Common 320px, 360px, 375px, 384px, 400px, 414px, 500px, 720px. Most 4.7-5 inch Android devices are 720px

    Normally, to fit most screens with one or two sets of effect graphics, abandon extreme screens or downgrade them elegantly at the expense of some effects, which are now based on 750.

  2. Determine the html font size for different screen sizes.

    html font size = screen width / number of copies of screen division

    Number of screen divisions: 10, 15, 20, etc. (Dividing criteria vary)

  3. Page element size unit px is converted to rem unit.

    Page element rem = page element value (px) / html font-size font size

  4. Media queries are used to transform the size of html font-size for different screen sizes.

Scenario 2(flexible.js)

  • flexible.js
  • rem

1. Simple and efficient rem adapter flexible.js

  • brief introduction

    flexible.js official address

    Simple and efficient mobile adapter library from mobile Taobao team

  • function

    The js file of this adapter library is preprocessed by dividing the current device into 10 equal parts, but the proportions are the same for devices of different sizes. (so-called scale: current screen width / current html font-size equals 10)

  • Use

    Since this adapter library automatically defines the size of html font-size for devices of different sizes, it simplifies development without having to manually query definitions through media.

    1. Determine the hmtl font-size of the current page, the width of the current device page (design draft)/10
    2. Convert element size units in pages to rem
  • flexible.js source parsing

    (function flexible(window, document) {
        // The root element of the acquired html
        var docEl = document.documentElement
            // dpr physical pixel ratio
        var dpr = window.devicePixelRatio || 1
        // adjust body font size to set the font size of our body
        function setBodyFontSize() {
            // Set the font size of the body if the page has the body element
            if (document.body) {
       = (12 * dpr) + 'px'
            } else {
                // If there is no body on the page, wait until the main DOM elements of our page are loaded before setting the body
                // Font size of
                document.addEventListener('DOMContentLoaded', setBodyFontSize)
        // set 1rem = viewWidth / 10 Sets the text size of our html element
        function setRemUnit() {
            var rem = docEl.clientWidth / 10
   = rem + 'px'
        // reset rem unit on page resize reset rem size when we change page size
        window.addEventListener('resize', setRemUnit)
            // pageshow is an event triggered by our reloading of the page
        window.addEventListener('pageshow', function(e) {
            // e.persisted returns true, which means that if the page is taken from the cache, the rem size needs to be recalculated
            if (e.persisted) {
        // Detect 0.5px support Some mobile browsers do not support 0.5px writing
        if (dpr >= 2) {
            var fakeBody = document.createElement('body')
            var testElement = document.createElement('div')
   = '.5px solid transparent'
            if (testElement.offsetHeight === 1) {
    }(window, document))

Added by Destramic on Tue, 04 Jan 2022 09:32:10 +0200