手机页面——分辨率特别乱: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’;
};
};