适用于移动设备弹性布局的js脚本(rem单位)

背景介绍

css单位

• px: 设置固定的布局或者元素大小，缺点是没有弹性
• em: 参考父元素的font-size，em会继承父级元素的字体大小，em的值并不是固定的
• rem: 相对根元素html的font-size
• %: 相对父元素，对于position: absolute;的元素是相对于已定位的父元素，对于position: fixed;的元素是相对于ViewPort（可视窗口）
• vw: view width的简写, 是指可视窗口的宽度，浏览器宽度1200px, 1 vw = 1200px/100 = 12 px
• vh: view height的简写，是指可视窗口的高度，浏览器高度900px, 1 vh = 900px/100 = 9 px
• vm: 相对于视口的宽度或高度中较小的那个, 其中最小的那个被均分为100单位的vm，浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px
• in: 寸
• cm: 厘米
• mm: 毫米
• pt: point, 大约1/72寸
• pc: pica, 大约6pt, 1/6寸

• em，%: 相对于父元素
• rem: 相对于html
• vw, vh, vm: 相对于可视窗口

HTML viewport基础

概念

用法

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性说明

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例，默认值1。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

弹性布局方案

先弄明白几个概念：

思路

window.devicePixelRatio = document.body.clientWidth / window.screen.width;

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'user-scalable=no,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale);

• UI设计图文字大小30px, 那么我习惯使用 font-size: 1.5rem;
• UI设计图图片宽100px, 我习惯使用 width: 5rem;

var base = 720 / 20; // 720为UI设计稿的宽
var fontSize = deviceWidth / base;
document.documentElement.style.fontSize = fontSize + 'px';

结合以上，完整代码为：

<script type="text/javascript">
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'user-scalable=no,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale);
window.onresize = function (base) {
  var deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
  var screenWidth = window.screen.width;
  if (deviceWidth / screenWidth != window.devicePixelRatio) {
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
    deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
  }
  var fontSize = deviceWidth / base;
  document.documentElement.style.fontSize = fontSize + 'px';
};
window.onresize(720);
</script>

var deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
var screenWidth = window.screen.width;
if (deviceWidth / screenWidth != window.devicePixelRatio) {
  document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
  deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
}