layui移动端适配_复习之移动端适配方法

适配概念：

在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放（看起来差不多）。

适配的元素：（有尺寸的地方都考虑一下适配）

字体、宽高、间距、图像（图标、图片）

适配的方法：

1. 百分比适配

2. viewport缩放适配

3. DPR缩放适配

4. rem适配 （目前比较主流）

5. vw、vh适配

百分比适配

> 核心：根据父级算百分比，需配合其他布局使用（一般配合flex盒子使用）。

一般较常使用在，高度不变，宽度在变的布局。

viewport 缩放适配

核心是：把所有机型的css像素设置成一致的。

1. viewport 需要通过js动态的设置（不能直接把device的值设置成数值）。

2. 通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的。

公式：缩放比 = css像素(当前值) / 375(目标值)

获取css像素的方法有（前提条件 viewport 没有缩放）： var curWidth = document.documentElement.clientWidth; var curWidth = window.innerWidth; var curWidth = window.screen.width;

这种方法是基于meta标签的，是利用js来使得设备的css像素都变成一致。如：

(

然而，这种方法并不常使用，因为如果把所有的移动设备都设置成统一的css像素值，那么页面在所有设备中都是一样的，那就不能体现各种移动端设备的区别了。

DPR 缩放适配

核心是：把css像素缩放成与设备像素一样大的尺寸（css像素 ：设备像素 = 1 : 1）。

原理是：根据DPR的值，把视口进行缩放，缩放到物理像素，也就是把css像素的值设置成物理像素，让所有的设备都变成一个css像素对应一个设备像素。

获取DPR的方法：window.devicePixelRatio

(

这种方法和第二种viewport缩放方法类似，DPR缩放方法在移动端也不常用，原因跟viewport缩放方法差不多。

rem 适配 （目前比较主流）

核心是：把所有的设备都分成相同的若干份，再计算元素宽度所占的份数。

em: 作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小。（font-size：m px; ---》 1em = m px）
1、chrome下有最小字体限制，必须为12px，所以这个值不能小于12。
2、如果两个一样的元素，但是里面字体不一样，那就不能统一设置了。或者元素字体变化了，就又要统一设置一遍。

rem：css3新增的一个相对单位，是相对于根元素字体大小。

（html{font-size:20px} ---》 2rem=40px）

适配原理：把所有的设备都分成相同的若干份，再计算元素宽度所占的份数。（栅格化）

1. 元素适配的宽度（算出来的） = （ 屏幕实际的宽度（css像素） / 100 ） * 元素实际占的列数。

2. 元素在设计稿里的宽度（量出来的）。

3. 列数（随便给的） 100

4. 一列的宽度（算出来的） = 屏幕实际的宽度（css像素） / 100

一列的宽度就是一个rem。

5. 元素实际占的列数（算出来的） = 元素在设计稿里的宽度 / 一列的宽度 。

width: 10rem;(实际切图时给的值) ===》 元素适配的宽度 width, 一列的宽度 rem, 元素实际占的列数 10。 元素适配的宽度（算出来的） = （ 屏幕实际的宽度（css像素） / 100 ） * 元素实际占的列数。
html{font-size：屏幕实际的宽度（css像素） / 列数 }。

设置html字体的方法：

1. 用js来设置html的字体大小。

第一种方法：

<

注意：真正切图时候的方法：1，算出rem，还是根据设备实际的css像素。2，量出一个元素在设计稿里的尺寸。3，拿这个尺寸，除以DPR的值后，再去换算rem。

第二种方法：能伸能缩

IOS9 不支持es6。

<

<

2. 用媒体查询设置html字体大小（css3方法） --- 用的不多

html 

vw、vh 适配

> 为适配而生的单位(跟rem分成一百份原理一样)。

• vw: Viewport’s width 的简写，1vw 等于视口宽度的1%。(100 * (clientWidth / designWidth) + 'px')

375 / 100 = 3.75px; 1vw = 3.75px; (100 * (clientWidth / designWidth) + 'px') / 1vw = 13.33333333333 vw;

• vh: Viewport’s height 的简写，1vh 等于视口高度的1%。
• vmin: 取vw与vh中最小的值。
• vmax: 取vw与vh中最大的值。

支持情况： >= ios8 , >= Android 4.4 。

方案一：通篇使用vw。

方案二：通过vw设置根节点字体大小，页面尺寸依然使用rem。（用的较多）

<

hotcss 适配

https://github.com/imochen/hotcss (移动端布局终极解决方案 --- 让移动端布局开发更加容易 http://imochen.github.io/hotcss/)

https://github.com/amfe/Lib-flexible (可伸缩布局方案)

> 原理：DPR缩放适配 + rem 适配。

别人写的一个适配方法。

要下载：clone or download ---> download ZIP (移动端布局终极解决方案 --- 让移动端布局开发更加容易 http://imochen.github.io/hotcss/)
使用：引入src文件 example

插件：sass, easy scss(把scss转成css文件)。预处理器：less sass（把px转成rem）。

- css要怎么写？https://github.com/imochen/hotcss

1. @import '/path/to/px2rem.scss';

2. $designWidth : 750; //如设计图是750

3. css要写在scss文件里面

> 能解决1px问题。

> 和rem的区别：viewport 的值不一样。