码迷,mamicode.com
首页 > 移动开发 > 详细

移动端rem布局

时间:2016-06-14 11:43:05      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:

手机页面——分辨率特别乱:
1.定宽320px——优点:简单,缺点:不能适应
2.百分比——优点:能适应各种分辨率,缺点:太麻烦
3.rem——优点:方便、适应各种分辨率(首先定义一个“根大小”html{font-size:20px;})
 
rem :看的是html的字体大小(先得定html的font-size)
html{font-size:20px;}
切图,基本的宽度用320
注意:只要使用了rem切图那就千万别用px,和em。
      rem——不能出现除了rem以外任何单位
root->em       root         html
 
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
initial:[?‘n???l]
device: [d?‘va?s]
        viewport             视口
        width             设备的宽度 (device )
        initial-scale     初始化缩放比例
        user-scalable     用户缩放
 

当屏幕发生变化的时候(变大或变小),以320的屏幕为基准进行计算,屏幕的缩放比例大小,然后当window.onload和onresize的时候,重新给document的font-size赋值,从而达到适应屏幕变化的效果
 
99%的公司:3套页面、偷懒2套(PC、手机和pad)——效果特别差
通过后台判断进入哪套页面——跟前台无关
 
写法1:封闭空间的写法
(function(win,doc){
   win.onload=win.onresize=function(){
      doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320+‘px‘;
   };
})(window,document);

 
写法2:
window.onload=function(){
   document.documentElement.style.fontSize = document.documentElement.clientWidth/320*20+‘px‘;
   window.onresize = function(){
      document.documentElement.style.fontSize = document.documentElement.clientWidth/320*20+‘px‘;
   };
};

移动端rem布局

标签:

原文地址:http://www.cnblogs.com/shiyou00/p/5583038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!