移动端适配你了解多少（一）

写在前面~

• css像素：代码中使用的逻辑像素，衡量页面上的内容大小
• 设备像素：即物理像素，控制设备显示的单位，与设备、硬件有关
• 设备独立像素：与设备无关的逻辑像素，不一样于设备像素（物理像素），不是真实存在的。
• 设备像素比：定义设备像素与设备独立像素比的关系window.devicePixelRatio）设备像素比=物理像素/设备独立像素
• 分辨率：指的是屏幕上垂直和水平的总物理像素

好像面试问移动端适配还挺多的，在网上查找了不少资料（侵删），总结一下：

1. px + viewport适配
2. rem布局
   CSS3媒体查询适配
   基于设计图的rem布局
   基于屏幕百分比的rem布局
   小程序的rpx布局
3. vw布局

（1）经过媒体查询的方式即CSS3的meida queries
    （2）以天猫首页为表明的 flex 弹性布局
    （3）以淘宝首页为表明的 rem+viewport缩放
    （4）rem 方式

1、px + viewport适配

  经过动态设置meta标签的viewport让css中的1px等于设备的1px。

  首先咱们必需要了解到viewport是什么，viewport是用户的网页可视区域。手机浏览器就是页面放在一个虚拟的“窗口”（viewport）中，一般这个虚拟的窗口比屏幕宽，这样就不会破坏没有针对手机浏览器优化的网页的布局（不会把每一个网页挤到很小的窗口中）。用户能够经过平移和缩放来看网页的不一样部分。

  一般viewport是指视窗、视口，浏览器上(也多是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不一样的，pc端的视口是浏览器窗口区域，而在移动端有三个不一样的视口概念：布局视口、视觉视口、理想视口

布局视口：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把本身默认的viewport设为980px或其余值，通常都比移动端浏览器可视区域大不少，因此就会出现浏览器出现横向滚动条的状况

视觉视口：用户经过屏幕看到的页面区域，经过缩放查看显示内容的区域，在移动端缩放不会改变布局视口的宽度，当缩小的时候，屏幕覆盖的css像素变多，视觉视口变大，当放大的时候，屏幕覆盖的css像素变少，视觉视口变小。

理想视口：通常来说，这个视口其实不是真实存在的，它对设备来讲是一个最理想布局视口尺寸，在用户不进行手动缩放的状况下，能够将页面理想地展现。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

设置理想视口就在header中加入这样一行代码：

 <meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,  maximum-scale=1.0,minimum-scale=1.0">

2、rem布局

1.CSS3媒体查询适配 meida queries

经过查询设备的宽度来执行不一样的 css 代码，最终达到界面的配置

@media screen and (max-width: 320px){....适配iphone4的css样式}@media screen and (max-width: 375px){ ....适配iphone6/7/8的css样式}@media screen and (max-width: 414px){....适配iphone6/7/8 plus的css样式}......

优势：

• media query能够作到设备像素比的判断，方法简单，成本低，特别是对 移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式 布局
• 方法简单，只需修改css文件
• 调整屏幕宽度时不用刷新页面就能够响应页面布局

缺点：

• 代码量大，不方便维护
• 不可以彻底适配全部的屏幕尺寸，须要编写多套css样式
• 为了兼顾大屏幕或高清设备，会形成其余设备资源浪费，特别是加载图片资源
• 为了兼顾移动端和PC端各自响应式的展现效果，不免会损失各自特有的交互方式

2.基于设计图的rem布局

  一般咱们拿到的设计图宽度的是750也就是基于iphone6/7/8的设计图，咱们若是要想让1px像素等于设计图的1px该怎么作呢？

  其实很简单，直接让根元素的font-size: 0.5px便可（由于是2倍图，1px等于2实际像素，因此为0.5px）。可是市面上的机型不必定都是750px的，这个时候咱们就要进行等比缩放了。

html.fontSize = clientWidth / 750

还有一个小问题，日常开发都是基于谷歌chorme开发的，chrome并不支持font-size小于12的字体。因此可让font-size大于12，在以上基础上将结果放大100倍，而后写样式的时候再除以100。嗯~看到这里我以为很绕啊，不过开始放在这里了。
js伪代码：

html.fontSize = clientWidth / 750 * 100

样式：

.element {width: 0.1rem; /* 实际到6/7/8上就是10px */}

3.基于屏幕百分比的rem布局

  这种方式是给元素设置百分比，例如2个div想占满宽度100%，那么一个div设置宽度为50%，这样不固定宽度，使得在不一样的分辨率下都能达到适配。
  各子元素或属性的百分比设定计算：
1.子元素width、height的百分比:子元素的width或height中使用百分比，是相对于子元素的直接父元素
2.margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关
3.border-radius的百分比：border-radius的百分比是相对于自身宽度，与父元素无关
优势：

• 宽度自适应，在不一样的分辨率下都能达到适配

缺点：

• 百分比的值很差计算
• 须要肯定父级的大小，由于要根据父级的大小进行计算 各个属性中若是使用百分比，相对父元素的属性并非惟一的
• 高度很差设置，通常须要固定高度

4. 小程序的rpx布局

  小程序有个rpx能够根据屏幕自适应。官方文档的介绍：能够根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素，也就是说，它内部的实现原理其实和基于设计图的rem布局的原理差很少。

  只不太小程序内部处理了一下，让rpx直接可以根据屏幕宽度自适应，而不是像rem那样依赖于根元素的font-size.

3、VM布局

css3中引入与视口有关的新的单位vw和vh，vw表示相对于视口的宽度，vh表示相对于视口高度。

那么问题来了，平时咱们拿到的设计图都是基于px标记的，怎么将px转为vw呢？
vw单位换算：视口宽度为100vw占满整个视口区域，那么1vw至关于占整个视口宽度的1%，因此1px= 1/375*100 vw
全部的页面元素均可以直接进行计算换算成vw单位，可是这样计算和百分比方案计算比较相似，都会比较麻烦。
可是有一个比较厉害的插件—— postcss-px-to-viewport，能够预处理css,将px单位转换为vw单位，可是须要进行一些相关的webpack配置。详情可看上方连接官方配置解释。

{loader: 'postcss-loader',options: {	plugins: ()=>[require('autoprefixer')({		browsers: ['last 5 versions']}),require('postcss-px-to-viewport')({		viewportWidth: 375,		viewportHeight: 1334,		unitPrecision: 3,		viewportUnit: 'vw',		selectorBlackList: ['.ignore', '.hairlines'],minPixelValue: 1,mediaQuery: false})]}

优势：

• 指定vw\vh相对与视口的宽高，由px换算单位成vw单位比较简单
• 经过postcss-px-to-viewport插件进行单位转换比较方便

缺点：

• 直接进行单位换算时百分比可能出现小数,计算不方便
• 兼容性- 大多数浏览器都支持、ie11不支持
• 少数低版本手机系统 ios八、android4.4如下不支持