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
< html >
< head >
< meta name ="viewport" content ="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" >
< meta charset ="utf-8" >
< title >rem基础布局
< script type ="text/javascript" >
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);
};
< style type ="text/css" >
/* === 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;}
< body >
< div class ="wrap" >
< div class ="pro" >
< ul class ="clearfix" >
< li > < div class ="box" > < p >区块文案
< li > < div class ="box" > < p >区块文案
< li > < div class ="box" > < p >区块文案
< li > < div class ="box" > < p >区块文案
< li > < div class ="box" > < p >区块文案