标签：转换 vant px vw postcss viewport

vue 插件：postcss-px-to-viewport （布局换算插件）   

postcss.config.js  

module.exports = {
    plugins: {
        // ...
        'postcss-px-to-viewport': {
            unitToConvert: 'px',
            viewportWidth: 750,
            unitPrecision: 5,
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: undefined,
            include: undefined,
            landscape: false,
            landscapeUnit: 'vw',
            landscapeWidth: 568
        }
    }
}

主角是谁

在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，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就是为了解决这个问题

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

• 首先，无论换算方不方便，我都不想换算（就是这么懒

  标签：转换,vant,px,vw,postcss,viewport
  来源： https://www.cnblogs.com/2019gdiceboy/p/15607698.html

  本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
  2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
  3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
  4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
  5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。