Mobile page rem layout_html/css_WEB-ITnose

The general size of mobile page design is 640. However, the size of mobile screen is indeed uncertain. In this way, how can we make a mobile page that adapts to all mobile phones?
There are two general solutions, rem layout and percentage layout. I have tried both solutions, so now I recommend using rem layout to create mobile pages;

Rem layout compatibility:
Mozilla Firefox 3.6, Apple Safari 5 , Google Chrome, IE9 and Opera11, ie6-ie8, it’s better not to use rem
However, with the general browsers on mobile phones nowadays, you can generally just ignore the IE kernel browser.

REM calculation formula
Example: html set font-size:16px 1rem = 16px
Then 640px = 640/16 =40rem

Personal suggestion Set to 100px for easy calculation

First, define a 100px
html{ font-size:100px;}/*Set the basic rem*/

Then, the core code is this js operation, which controls the basic rem value according to the size of the page;

                  <p class="sycode">                      <p class="sycode">       new  function (){    var _self =  this;   _self.width = 640; // 设置默认最大宽度    _self.fontSize = 100; // 默认字体大小    _self.widthProportion =  function(){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};   _self.changePage =  function(){       document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");   }   _self.changePage();   window.addEventListener('resize', function(){_self.changePage();}, false);};      </p>                  </p>

demo

698f387d5ac8b32812ac9052a542202a
f4c4880127ae9dd2e05b78c78da182f8
d8c98f5cf700b4e470b05a6cb6f5b37a
eddc920ce935df411dbdebb65b7a6cd9
7ec06c9be21b8edf9694413112680dab
d7d79e019e4411904c36da9aac002d8arem基础布局 6c52f549d545509a3f6b1841d4174048
42bdcfab5f4a133ebb61dd2be06c39e8
new  function (){
    var _self =  this;
   _self.width = 640; // 设置默认最大宽度
   _self.fontSize = 100; // 默认字体大小
   _self.widthProportion =  function(){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p8769da6847b90a77dd28442183c2f0b9
45a62448fa2e860b03e40845cd227031
/* === base style=== */
*{ margin:  0px;  padding:  0px;}
ul{ list-style:  none;}
.wrap{ min-width:  320px;  max-width:  640px;  width:  100%;  margin:  0px auto; ; background:  #2a6ace;  font-family: '微软雅黑', 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,sans-serif;  font-size:  12px;} /* 适用于手机端：字体大小用em，1em=16px；为默认字体大小;最大宽度640 */

.pro{ width: 6.2rem;  margin:  0px auto;  padding-top:  20px;  overflow:  hidden;}
.clearfix:after { content: ""; height: 0; display: block; clear: both;}
.clearfix { zoom: 1;}
.pro ul{ width: 6.4rem;}
.pro li{ width:  3rem;  height:  3.6rem;  float:  left;  margin:  0 0.2rem 0.2rem 0;}
.pro li .box{ width:  3rem;  height:  3rem;  background:  #ccc;}
.pro li p{ font-size:  0.24rem;  line-height:  0.6rem;  text-align:  center;}
474175be3cf7ba74033b844564815f42
d0055e67914132238c4860a7d7b41114
7ac87cc3074d78d66823928ce74283a7
074c525bd7201f94939dc9a849d8d823
    42efd90fd297e35ba08639e7704636ce
       f5b6a9d5ab45b3d391b8e808c334f836
          8b5f8b1972378d9df41b5958cd285f77  da57aab6ddc122cfaa7a3649c87f9d7d8dd61fb8b4f2b44bbc08844e17229215  bc8040711cf23fb09d95fda2b39dea8d区块文案 710bc5a0aa003fd77a4e47db1deaa745  82def4c3e60ae4989a80bddd579a5d4c
          8b5f8b1972378d9df41b5958cd285f77  da57aab6ddc122cfaa7a3649c87f9d7d8dd61fb8b4f2b44bbc08844e17229215  bc8040711cf23fb09d95fda2b39dea8d区块文案 710bc5a0aa003fd77a4e47db1deaa745  82def4c3e60ae4989a80bddd579a5d4c
          8b5f8b1972378d9df41b5958cd285f77  da57aab6ddc122cfaa7a3649c87f9d7d8dd61fb8b4f2b44bbc08844e17229215  bc8040711cf23fb09d95fda2b39dea8d区块文案 710bc5a0aa003fd77a4e47db1deaa745  82def4c3e60ae4989a80bddd579a5d4c
          8b5f8b1972378d9df41b5958cd285f77  da57aab6ddc122cfaa7a3649c87f9d7d8dd61fb8b4f2b44bbc08844e17229215  bc8040711cf23fb09d95fda2b39dea8d区块文案 710bc5a0aa003fd77a4e47db1deaa745  82def4c3e60ae4989a80bddd579a5d4c
          8b5f8b1972378d9df41b5958cd285f77  da57aab6ddc122cfaa7a3649c87f9d7d8dd61fb8b4f2b44bbc08844e17229215  bc8040711cf23fb09d95fda2b39dea8d区块文案 710bc5a0aa003fd77a4e47db1deaa745  82def4c3e60ae4989a80bddd579a5d4c
       21286d2745cd1b3ffe5f9b2362bd8c16
    8dd61fb8b4f2b44bbc08844e17229215
8dd61fb8b4f2b44bbc08844e17229215
838204844cdc810603e443aadb658114
1fe766e57712cffffefd5873a6367d0d