移动端开发 REM适配方案
2017-11-14 本文已影响0人
曾祥辉
1.meta:vp阻止缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.js获取页面宽度，书写meta
<head>
<script>
var width = document.documentElement.clientWidth //页面宽度
var css = 'html{font-size: ${width/10}px; //10 缩小比例 10rem = 页面宽度 缩放后大于12px
document.writs('<style>${css}</style>')
</script>
</head>
3.body的font-size不能小于12px //chrome浏览器默认最小font-size
4.物理像素为1px的border
- 获取设备像素比//window.devicePixelRatio(DPR 获取设备像素比)
- initial scale = 1/像素比
- 让rem变成 rem*像素比
- border:1px solid
