@

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

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) {
              document.body.style.fontSize = (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)
          }
      }
      setBodyFontSize();
  
      // set 1rem = viewWidth / 10 Sets the text size of our html element
      function setRemUnit() {
          var rem = docEl.clientWidth / 10
          docEl.style.fontSize = rem + 'px'
      }
  
      setRemUnit()
  
      // 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) {
              setRemUnit()
          }
      })
  
      // 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')
          testElement.style.border = '.5px solid transparent'
          fakeBody.appendChild(testElement)
          docEl.appendChild(fakeBody)
          if (testElement.offsetHeight === 1) {
              docEl.classList.add('hairlines')
          }
          docEl.removeChild(fakeBody)
      }
  }(window, document))