移动端网页meta设置和响应式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

苏宁易购WAP的meta分析

响应式

meta设置

媒体查询时读的width为viewport的宽度。viewport宽度为手机分辨率。比如note2 1280*720.需要重置为设备 640*360

方式

类型	css	javascript
原理	媒体查询宽、高范围。设置html的font-size基准值	(window.innerWidth/psd的初始化宽度)*psd的初始font-size。算出当前网页的font-size。赋给html
特征	优点：纯css解决	缺点：需要在页面渲染前，阻塞浏览器。部分旧手机浏览器，需内嵌JS代码才能保证阻塞。
缺点：因为是范围，不能精确适配。如果新增一种主流手机，离范围的边界较远，需要为它重新划定范围	优点非常精确

css响应式

范围的选择是根据需要适配的主流手机分辨率来定，尽量让主流手机接近范围边界。并非按规律递增。

/*
rem方式，750px 为psd基准宽度，50px为font-size基准大小。 body设置的是默认字体大小
*/html{font-size:50px;}
body{font-size:24px;}
@media screen and (min-width:320px){
html{font-size:.333333333333332px;}
body{font-size:12px;}
}
@media screen and (min-width:360px){
html{font-size:24px;}
body{font-size:12px;}
}
@media screen and (min-width:375px){
html{font-size:25px;}
body{font-size:12px;}
}
@media screen and (min-width:384px){
html{font-size:.6px;}
body{font-size:14px;}
}
@media screen and (min-width:400px){
html{font-size:.666666666666668px;}
body{font-size:14px;}
}
@media screen and (min-width:414px){
html{font-size:.6px;}
body{font-size:14px;}
}
@media screen and (min-width:424px){
html{font-size:.266666666666667px;}
body{font-size:14px;}
}
@media screen and (min-width:480px){
html{font-size:32px;}
body{font-size:.36px;}
}
@media screen and (min-width:540px){
html{font-size:36px;}
body{font-size:.28px;}
}
@media screen and (min-width:720px){
html{font-size:48px;}
body{font-size:.04px;}
}
@media screen and (min-width:750px){
html{font-size:50px;}
body{font-size:24px;}
}

js响应式

/*
rem方式，640px 为psd基准宽度，16px为font-size基准大小。
*/

function _adaptFont(maxWidth, baseWidth,baseSize){
maxWidth = maxWidth || ;//最大值640px
baseWidth = baseWidth || ;
baseSize = baseSize || ;
var winWidth = parseInt(window.innerWidth); /*s4手机读到的winWidth是分辨率的宽*/
var docWidth = parseInt(document.documentElement.clientWidth); //和winWidth区别是，减去右边滚动条
var bodyWidth = parseInt(document.body.clientWidth); //混合模式下使用
var docWidth = Math.min(winWidth, bodyWidth, docWidth);
docWidth > maxWidth && (docWidth = maxWidth); //设置基准值
document.documentElement.style.fontSize = (docWidth/baseWidth)*baseSize + 'px';}
_adaptFont();
window.addEventListener("resize",_adaptFont);