Home > Web Front-end > HTML Tutorial > Mobile page rem layout_html/css_WEB-ITnose

Mobile page rem layout_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:49:32
Original
1483 people have browsed it

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>
Copy after login

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 >区块文案  
      
   


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template