移动端自适应方案
2017-04-25 本文已影响52人
蘇上方
问题来源
传统web开发我们一般只需要用像素去描述dom的宽高，但考虑到移动端屏幕的尺寸千奇百怪，我们希望找到一种可以根据屏幕大小去自适应宽高的方案。
原理
- 除了font-size之外的其它css尺寸都使用了rem作为单位
方法
(1) 令页面宽度（device-width）等于设备逻辑像素，其中，device-width = 物理像素 / （dpr * scale） ， 所以，我们只需根据手机的 dpr 动态的去设置 scale
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]')
.setAttribute('content','initial-scale=' + scale + ',
maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
(2) 令页面 <html> 的 font-size ， font-size = deviceWidth / 10 + 'px' .
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 10 + 'px';
(3) 计算元素的尺寸
通过步骤二将视觉稿的页面分成10等分( 设置成10只是为了方便计算，这里实际上可以选择自己要分的份数 )，假设视觉稿是按照 360p 给的尺寸，那么我们 1rem 就表示 36 px , 那么当一个元素的尺寸为 72px * 36px ， 我们对于的rem尺寸应该是 2rem * 1rem
(4) 字体可能需要额外的媒体查询
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
注：
- 懒人可以使用淘宝的库
https://github.com/amfe/lib-flexible - 使用
sublime的同学可以下载cssrem这个插件，让你编码速度快到飞起.
参考这里http://www.cnblogs.com/olivianate/p/5328716.html
{
"px_to_rem": 108, # 一般设置为 视觉稿 / 10
"max_rem_fraction_length": 2,
"available_file_types": [".css", ".less", ".sass"]
}
