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

适配方案

将页面的宽度设置为设置的视窗宽度后，即可进行移动端适配工作了。

从适配的目的是在屏幕大小不同的终端设备拥有统一的界面，让拥有更大屏幕的终端展示更多的内容，从上面两个角度出发，核心思路是：页面内容充满整个视窗

1. rem 布局

rem 是CSS3新增的一个相对单位，它以 HTML 元素的 font-size 为比例：

/* 设置html元素的字体大小为 16px，即 1rem = 16px */
html {
    font-size: 16px;
}
/* 设置box元素宽 160px，10rem = 160px */
.box {
    width: 10rem; /* 160px */
}
复制代码

修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的份数，页面内容即充满整个视窗且无横向滚动条。

以宽度750像素的设计稿为例，有两个元素，一个元素占 550 个像素，另一个占 750 个像素：

// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .w-550px {
        width: 550rem;
        height: 100px;
        background-color: rgb(209, 255, 240);
    }
    .full {
        width: 750rem;
        height: 100px;
        background-color: rgb(195, 200, 199);
    }
</style>
<script>
    function setRem() {
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = scale + 'px';
    }
    setRem();
    window.onresize = setRem;
</script>
复制代码

页面伸缩，网页布局也会进行伸缩。运行结果如下：

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

1.1 搭配 postcss-pxtorem 搭建项目

1. 使用 vue-cli 创建项目

vue create rem-demo
复制代码

1. 设置 viewport

<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了，这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
复制代码

1. 动态设置 rem 的值

创建 rem.js 文件：

// rem-demo/util/rem.js
// 设置基准大小
const baseSize = 32
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例
  const scale = document.documentElement.clientWidth / 750
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
window.onresize = function () {
  setRem()
}
复制代码

引入 rem.js 文件：

// rem-demo/src/main.js
import './utils/rem'
复制代码

1. 安装并使用 postcss-pxtorem

安装 postcss-pxtorem

yarn add postcss-pxtorem --dev
npm i postcss-pxtorem --save-dev
复制代码

使用 postcss-pxtorem

// rem-demo/vue.config.js
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue : 16, //（数字，函数） 根元素字体大小
            unitPrecision: 5, //（数字）允许REM单位增长的十进制数字
            replace: true, // （布尔值）替换包含rems的规则，而不添加后备
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px
            minPixelValue: 0, // （数字）设置要替换的最小像素值
            selectorBlackList  : [], // 忽略转换正则匹配项
            propList   : ['*'], // 可以从px转换为rem的属性，匹配正则
            exclude: /node_modules/i // （字符串，正则表达式，函数）要忽略并保留为px的文件路径
          }),
        ]
      }
    }
  }
}
复制代码

1. 运行结果

例如：设计稿为 750*1136，我们需要一个盒子宽 375px：

/* 按照设计稿的宽度编写 */
.box {
  width: 375px;
  height: 400px;
  background-color: rgb(202, 246, 232);
}

/* 转换后 */
.box {
    width: 23.4375rem;
    height: 25rem;
    background-color: #caf6e8;
}

/* 使用 Px 和 PX 作为单位，pxtorem 将不进行转换 */
复制代码

1.2 总结

优点：rem 布局能很好的实现在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致

缺点：在大屏设备（Pad）上，元素尺寸会很大，页面显示更少的内容。

针对大屏改进方案：

1. 限制 rem 的最大值，
2. 通过媒体查询，限制内容最大宽度，如：腾讯网、荔枝FM

在移动端浏览器 rem 方案是解决移动端适配的主流方案，这套方案的另一个名字叫做 flexible 方案，通过动态设置 rem 实现在不同尺寸的设备上界面展示效果一致。

在 lib-flexible 库里有这样一段话：

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

可知，rem 方案的目的是解决 viewport 不兼容的问题，但是我个人认为，rem 的目的提供一种比例单位，不仅可以解决移动端适配问题，也还有其他的用处。

2. vw/vh 布局

vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份，1vw = device-width/100

2.1 搭配 postcss-px-to-viewport 搭建项目

1. 使用 vue-cli 创建项目

vue create vw-demo
复制代码

1. 设置 viewport

<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了，这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
复制代码

1. 安装并使用 postcss-px-to-viewport

安装 postcss-px-to-viewport

yarn add postcss-px-to-viewport --dev
npm i postcss-px-to-viewport --save-dev
复制代码

配置 .postcssrc.js

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    },
  },
};
复制代码

1. 运行结果

以 750*1136 的设计稿为例，设计一个宽 375px 的盒子

.test-vw {
  width: 375px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}

/* 转换后 */
.test-vw {
    width: 50vw;
    height: 13.333333vw;
    font-size: 5.333333vw;
    text-align: center;
    line-height: 13.333333vw;
    background: #13b5b1;
}
复制代码

运行效果：

2.2 总结

优点：vw、vh布局能良好的实现在不同尺寸的屏幕横向填满屏幕，使用 postcss-px-to-viewport 能很好的帮我们进行单位转换

缺点：

• 无法修改 vw/vh 的值，在大屏设备（Pad）中元素会放大，且无法通过 js 干预
• 兼容性- 大多数浏览器都支持、ie11不支持 少数低版本手机系统 ios8、android4.4以下不支持

3. 百分比布局

在 css 中，我们可以使用百分比来实现布局，但是需要特定宽度时，这个百分比的计算对开发者来说并不友好，且元素百分比参考的对象为父元素，元素嵌套较深时会有问题。

案例：设计稿为 750*1136，我们需要一个宽度为 200px 的盒子

.box {
  /* w = 200 / (750/100) = 26.66667 */
  /* 可知，计算复杂，且会存在误差 */
  width: 26.6%;
}
复制代码

扩展： 子元素的 width 和 height 百分比参考对象是父元素的 width 和 height，margin、padding 的参考对象为父元素的 width，border-radius、background-size、transform: translate()、transform-origin 的参考对象为自身宽高

4. 响应式布局

通过媒体查询，可以针对不同的屏幕进行单独设置，但是针对所有的屏幕尺寸做适配显然是不合理的，但是可以用来处理极端情况（例如 IPad 大屏设备）或做简单的适配（隐藏元素或改变元素位置）

CSS3 @media 查询属性详解

媒体查询案例：

body {
  background-color: yellow;
}
/* 针对大屏产品 ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: blue;
    }
}
复制代码

5. px 为主，搭配 vw/vh、媒体查询与 flex 进行布局

先查看一下当前各大网站移动端适配的结果：

小屏幕自适应，限制最大宽度：腾讯网、荔枝FM

布局高度固定，宽度自适应：淘宝网、百度、网易

移动端适配的宗旨是：让拥有不同屏幕大小的终端设备拥有一致的 UI 界面，让拥有更大屏幕的终端展示更多的内容， 那么布局高度固定、宽度自适应的方案针对文本较多的网页（百度、网易）是更好的，针对大屏幕，腾讯网和荔枝FM的做法是限制最大宽度来让大屏有更好的体验。

我们从页面编写的角度出发，页面中更多的是文本和布局，关于文本，我们应该使用 px 作为单位，来实现在大屏设备显示更多的内容，而不是更大的文本；关于布局，我们可以使用 flex 实现弹性布局，当实现特定宽高元素时，可以适当的使用 vw/vh，当特定的值使用 vw/vh 计算复杂或存在误差时，也可以使用 rem

适配流程

1. 编写 <meta> 标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度
2. 在 css 中使用 px
3. 在适当的场景使用flex布局，或者配合vw进行自适应
4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
5. 在跨设备类型如果交互差异太大的情况，考虑分开项目开发