移动端开发 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

  1. 获取设备像素比//window.devicePixelRatio(DPR 获取设备像素比)
  2. initial scale = 1/像素比
  3. 让rem变成 rem*像素比
  4. border:1px solid
上一篇下一篇

猜你喜欢

热点阅读