REM for mobile-side adaptation

Mobile-side adaptation

• Web page running on mobile (H5 page)
• Cross-platform
• Based on WebView ()
• Based on WebKit

Common suitable formula method

• PC-side with Display:inline-block, let div box horizontal row

• Mobile Web: Using fixed height, width percentage,flex Flexible layout , media query medium queries ;

• Media Enquiry
  Combine CSS with media type (screen, print) and media parameters (Max-width)

     @media screen and (max-width: 320px){        /* css在屏幕跨度<=320px时这段样式生效 */        .inner{            float: left;        }    }    @media screen and (min-width: 321px){        .inner{//        }    }

The above implements a simple horizontal and vertical response

• REM principle and introduction
  REM is a font unit, similar to PX,
  difference: Depending on the size of the HTML root element, it can also be used as a unit of height and width.
  Adaptation Principle : Dynamically modify the font-size adaptation of the HTML, REM is the size of the font-size of the HTML root element set by different screen sizes to achieve adaptation.

  /* +_media实现*/@media screen and (max-width: 360px) and (min-width: 321px){    html{        font-size: 20px;    }}@media screen and (max-width: 320px){    html{        font-size: 24px;    }}

The Font-size is dynamically set via JS:

//获取视窗宽度    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;        console.log(htmlWidth);    let htmlDom = document.getElementsByTagName(‘html‘)[0];        htmlDom.style.fontSize = htmlWidth/10 + ‘px‘;

REM Advanced

• REM Reference value calculation

   1rem = 16px

• REM Numerical calculation and construction

   170/16 = 170px

• REM combined with SCSS (Node-sass installation)
  You can also install Sass directly (Installation tutorial http://www.cnblogs.com/yehui-mmd/p/8035170.html)

• REM Fit Combat
  Adaptation by listening to the browser viewport

  let htmlDom = document.getElementsByTagName(‘html‘)[0];window.addEventListener(‘resize‘, (e)=>{    //获取视窗宽度    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;    htmlDom.style.fontSize = htmlWidth/10 + ‘px‘;})

Define REM adaptation functions and use (SASS syntax)

  @function px2rem($px) {      $rem:37.5px;//iphone6      @return ($px / $rem) + rem;  }  .header{      width:100%;      height: px2rem(40px);      background-color: red;      padding-left: px2rem(23px);   }

REM for mobile-side adaptation