一种开箱即贼好用的移动端适配方案

主角是谁

在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个博客园，应该没有人会反驳。

痛点在哪里

在之前有一种流行已久的移动端适配方案，那就是rem，我想下面这两句代码，有不少老移动端都不会陌生：

    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';

没错，在那个移动端UI稿尺寸为750*1334满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px*40px，那么开发者对应的写成1.2rem*0.4rem就可以了
这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的，有16的，很多已经严重超出口算力所能及的范畴了。所以后来诞生的px-to-rem或者px2rem就是为了解决这个问题
当然，这仍没有给css带来多少简洁的清流，因为人们有时候不需要去转换一些单位，比如字体大小font-size，有不少人希望给字体设置一个固定的px，它不会随着设备的不同而转换成rem，因为这样在一些平板设备上显得太大了

人们希望有这样一种方案...

首先，无论换算方不方便，我都不想换算（就是这么懒🤭），我也不想去操心什么转换系数
其次，有些属性或者类选择器我不想进行转换
css代码要足够简洁，我只希望看到一种单位，那就是px
我不想关心什么1px问题，我只想正常按照UI稿直接写

现在，它来了

postcss-px-to-viewport就是这样一款优秀的插件，它解决了以上提到的痛点，也满足以上提到的理想要求。它将px转换成视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

在vue项目中引入试试

我们先把它安装到项目的开发环境中：

 npm i postcss-px-to-viewport -D

在项目根目录下添加.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: ["van"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，
      landscape: false // 是否处理横屏情况
    }
  }
};

重新运行项目，使配置文件生效
我们写一段测试代码来验证一下：

<template>
  <div class="test-viewport">测试转换</div>
</template>

<style lang="less" scoped>
.test-viewport {
  width: 750px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}








</style>

打开控制台，可以看到已经进行了转换

需要注意的配置

propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['van'],它表示形如van,van-tab,tab-van,vant这样的类名的单位，都不会被转换

本文使用 mdnice 排版

来源：oschina

链接：https://my.oschina.net/u/4353238/blog/3230481

标签

Amp

postcss

black