移动端适配问题之vm/vh postcss-px-to-viewport

朴灿烈づ我的快乐病毒、 2021-07-26 17:38 699阅读 0赞

用postcss-px-to-viewport进行移动端适配非常容易,只需要按照UI给的大小直接写就可以,postcss-px-to-viewport可以自动将px转化成vm/vh,下面我们看一下在vue项目中怎么来配置吧

##### 一、安装 postcss-px-to-viewport #####

npm i postcss-px-to-viewport

##### 二、在项目根目录下建名为vue.config.js的文件（不懂为什么要建名为vue.config.js的可以看一下vue-cli下webpack相关） #####

![在这里插入图片描述][20200425160938729.png]

##### 三、在vue.config.js中引入postcss-px-to-viewport #####

const pxtovw = require('postcss-px-to-viewport')

##### 四、vue.config.js中配置项如下 #####

module.exports = { 
        css: { 
            loaderOptions: { 
                css: { 
                    // 这里的选项会传递给 css-loader
                },
                postcss: { 
                    // 这里的选项会传递给 postcss-loader
                    plugins: [
                        new pxtovm({ 
                            unitToConvert: 'px',
                            viewportWidth: 375,
                            unitPrecision: 5,
                            propList: ['*'],
                            viewportUnit: 'vw',
                            fontViewportUnit: 'vw',
                            selectorBlackList: [],
                            minPixelValue: 1,
                            mediaQuery: false,
                            replace: true,
                            exclude: []
                        })
                    ]
                }
            }
        }
    }

##### 五、重启项目就能自适应了 #####

[20200425160938729.png]: /images/20210726/049e6619ae324645813417e16559caa6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，699人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端适配

@charset "utf-8"; /* 涉及到的H5新标签，之后课程做介绍 */ html{ color:000;/*默认字体颜色黑色*...

本是古典何须时尚/ 2024年04月20日 00:24/ 0 赞/ 98 阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 181 阅读

相关移动端适配

视觉稿规范2点：1 以iphone6的 375 \ 667 为基点; 　　　　　　　2 对于retina屏幕（dpr=2），为了高清，视觉稿的画布是基准的2倍：就会变成75

水深无声/ 2023年08月17日 16:20/ 0 赞/ 184 阅读

相关移动端适配问题（一步到位）

移动端适配之间的准备工作 amfe-flexible 动态设置rem基准值 1-安装配置的包npm I amfe-flexible 2-安装后在入口文件中进行加

柔情只为你懂/ 2022年11月25日 13:17/ 0 赞/ 155 阅读

相关移动端适配

rem计算JS方式计算尺寸参照的标准尺寸 750px 换算比例为 100:1 （100px=1rem 50px=0.5rem 5px=0.05rem）

Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 419 阅读

相关移动端适配

移动端适配一、移动端适配是什么？二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调

客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 429 阅读

相关移动端适配

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][

怼烎@/ 2022年05月27日 23:28/ 0 赞/ 433 阅读

相关移动端适配

1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc

水深无声/ 2022年03月17日 06:14/ 0 赞/ 386 阅读

相关移动端适配

移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0

冷不防/ 2022年01月29日 03:13/ 0 赞/ 472 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 472 阅读