Vue笔记 （二） 如何做移动端适配 让你只用关心设计稿

一. 移动端基础知识

在移动端开发时，我们经常发现出现布局后有不兼容的问题，如何在不同设备上进行适配呢，希望康完这边，你能从原理到应用彻底熟悉移动端适配。

1.1 手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。
Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作为开发者，我们希望不用关注这些分辨率，因为我们常用的尺寸单位是 px 。

1.2 作为开发者我们需要知道

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
学会用谷歌浏览器模拟手机界面以及调试

二. 视口

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加 meta视口标签

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

三. 二倍图

3.1 什么是Retina技术

在PC端和早期的手机屏幕中: 1CSS像素 = 1 物理像素。
Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

3.2 倍图

对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。所以在标准的viewport设置中，需要使用倍图来提高图片质量，解决在高清设备中的模糊问题。在5050的div中，通常要放原始尺寸为100100的图。而不同设备的视口宽度，开发尺寸，物理像素比等不同，这就是移动端各种不兼容的基本原因。

四. 移动端常见布局

4.1 流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。它通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

4.2 flex布局

操作方便，布局极为简单，移动端应用很广泛
PC 端浏览器支持情况较差
IE 11或更低版本，不支持或仅部分支持。
ppt来源：传智黑马

4.3 rem布局

rem是什么的单位：rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

4.4 响应式布局

响应式的原理是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。
通常媒体查询的划分是这样的：
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

五. 使用插件postcss-px-to-viewport

大的方向上，我们可以使用flex，rem等进行布局，但当细分到每一个小地方时，比如一张图片，一段文字，一般会写一个固定的高度。比如，iphone6/7/8的视口是375*667，当我们根据设计稿写好页面后，如果你用谷歌浏览器调试模拟在其他设备上的效果，你可能会发现许多元素“脱离”了原来的位置。因为你在网页布局中使用的是px。
怎么解决呢？
聪明的你可能已经想到，如果把所有用px做单位的地方换成视口的尺寸做单位，也许能有较好的适配效果。
铺垫了这么多，我们今天的主角：插件postcss-px-to-viewport终于要闪亮登场了。
话不多说，直接看使用步骤。

5.1 安装

npm install postcss-px-to-viewport --save -dev

npm使用就不用多说了8

5.2 创建配置文件

在项目的根目录下，创建postcss.config.js

以后有机会可以做一期webpack vue-cli git这些什么的~

5.3 配置

不多说，每项都举个例，宁就懂了。这是我在一个项目里的配置，基本所有会用到的参数设置都用到了，详见注释。

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
            viewportWidth: 375,  //视窗宽度，对应设计稿宽度
            viewportHeight: 667, //视窗高度
            unitPrecision: 5,    //px转vw单位时精确到小数点后第几位
            viewportUnit: 'vw',  //视窗单位，建议vw
            selectorBlackList: ['ignore','tab-bar','tab-bar-item'],   //要忽略的，即不需要转换的类
            minPixelValue: 1,    //小于或等于1px的不转换
            mediaQuery: false,   //是否允许媒体查询
            exclude: [/TabBar/]  //忽略，不转换的文件，用js里的正则
        }
    }
}

还等什么，去你的项目里试试8，芜湖 起飞~
觉得有用的话欢迎点赞评论，以后vue系列会努力更新其他内容，有想看的朋友也可以留言。