移动端适配方案及不同单位区别

1.为什么要进行移动端适配？

移动端设备的尺寸很多，而UI设计稿一般只会基于一个尺寸（一般是750px）进行设计。假如开发人员完全基于该设计稿进行开发，就会出现一种现象，在不同尺寸的设备上，页面的展示效果各不相同，甚至可能出现布局错乱或者出现横向滚动条等情况。因此，开发人员就需要考虑如何让页面内容能够自适应设备尺寸，在设备尺寸较大时内容大一些，设备尺寸小的时候内容也能缩小，让页面在不同的设备尺寸下尽量呈现一致的展示效果。
移动端适配方案

目前流行的移动端适配方案有两种，rem 和 vw/vh(viewport)，由于 viewport 单位得到众多浏览器的兼容，现在更多的人推荐使用 viewport 方案来解决移动端适配问题。下面将对这两个方案做一个大致的介绍。
注意了，（面试题）移动端适配的解决方案 必考！

rem方案：
2.什么是rem

rem是一个相对于页面根元素html的font-size的一个单位，举个例子，假如设置了根元素html的font-size为18px，那么，1rem 等于 18px。由此可知，rem的大小是会随着根元素html的font-size的改变而改变的。rem方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素html的font-size的大小，以此来达到适配不同屏幕尺寸的目的。
rem方案实现步骤总结

// 安装插件
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
2、在main.js中引入amfe-flexible

import 'amfe-flexible';
3、在postcss.config.js文件中配置postcss-pxtorem

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'] // 需要被转换的属性
    }
  }
4、public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
<!--
含义如下：
* width=device-width：视口宽度和设备保持一致
* initial-scale=1：视口的默认缩放比例1.0
* maximum-scale=1：最大缩放比例1.0
* minimum-scale=1：最小缩放比例1.0
* user-scalable=no：不允许用户自行缩放
-->
px

很多人都认为它是一个固定单位，但其实它是个相对单位。它是相对于屏幕的分辨率的，但平时会把它当固定单位来用，毕竟谁写个页面老是切换自己电脑分辨率来看变化。

%

相对于自己的父级，父子关系哈，不是爷孙关系。只是相对于自己的父级。

em

相对于自己的字体大小。具体就是，如果自己设置了字体大小，那么你设置width:1em;就会相对于自己，如果自己没有设置，它就会逐级向上找或者说它自己继承于谁的字体大小，如果谁都没设置字体大小，那就是浏览器默认的字体大小，就是16px，此时就是1em=16px了。所以一定不要以为em是相对于父级了，是相对于自己或者继承过来的字体大小，没有就是浏览器默认的16px。

vw

相对于浏览器可视区的宽度，单位是1vw=1%，可视区的宽度不是屏幕宽度哈，这里需要注意，不是指你的屏幕可视区，而是相对于浏览器的可视区大小。

vh

vw是相对于浏览器可视区的宽度，那么vh就是相对于浏览器可视区高度了撒。

vmax

这东西怪的很，怪的是用这个来布局的都是大神了吧。

vmax指浏览器可视区的宽、高，以最大的进行百分计算。

vmin

vmax指的是浏览器的可视区的宽高，以最大进行百分比的计算，那vmin就是以最小的进行百分比的计算。