移动端H5开发布局方式总结

一、基础知识

1.视口

// width=device-width ： 视图宽度为 当前设备宽度
// user-scalable=no : 不允许用户缩放
// maximun-scale=1,minimum-scale=1 最大最小缩放
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximun-scale=1,minimum-scale=1">
  1. script 中去获取
    console.log(window.innerWidth):获取视图宽度
    console.log(docunment.documentElement.clientWidth):获取视图宽度
    console.log(window.devicePixelRatio):获取物理像素比 逻辑像素的比例：一个逻辑像素等于多少物理像素

3.响应式布局
对 不同的屏幕尺寸做出响应，并进行相应布局的一种移动web开发方式，一个网站兼容多个终端

原理：设置不同的尺寸宽度阶级梯度
576、768、960、1200 四个尺寸

二.rem 布局

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为什么web app要使用rem？

这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。

三.postcss-px-to-viewport