使用vw进行移动端的适配_使用vw进行移动端适配（nuxt项目）

基于nuxt 2.0.0

一、安装postcss-px-to-viewport

npm安装

npm install postcss-px-to-viewport --save-dev

或 yarn安装

yarn add -D postcss-px-to-viewport

二、在nuxt中配置postcss-px-to-viewport

在nuxt.config.js中配置

export default {

...

...

...

/*

** Build configuration

*/

build: {

/*

** You can extend webpack config here

*/

postcss: {

// 添加插件名称作为键，参数作为值

plugins: {

"postcss-px-to-viewport": {

unitToConvert: "px", // 默认值`px`，需要转换的单位

viewportWidth: , // 视窗的宽度,对应设计稿宽度

viewportHeight: , // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置

unitPrecision: , // 指定`px`转换为视窗单位值的小数位数

propList: ["*"], // 转化为vw的属性列表

viewportUnit: "vw", // 指定需要转换成视窗单位

fontViewportUnit: "vw", // 字体使用的视窗单位

selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类

mediaQuery: false, // 允许在媒体查询中转换`px`

minPixelValue: , // 小于或等于`1px`时不转换为视窗单位

replace: true, // 是否直接更换属性值而不添加备用属性

exclude: [], // 忽略某些文件夹下的文件或特定文件

landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)

landscapeUnit: "vw", // 横屏时使用的单位

landscapeWidth: // 横屏时使用的视窗宽度

}

},

preset: {

// 更改postcss-preset-env 设置

autoprefixer: {}

}

}

}

}

这样基本的配置就可以了。

其他适配问题可以参考下面的文章

参考：

End--------------

全面复工啦~

【前端适配】vw单位移动端适配方案

近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇,比较完美 ...

转：如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在

在Vue项目中使用vw实现移动端适配

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在提出了Flexible的布局方案,随着viewport单位越来越 ...

如何在Vue项目中使用vw实现移动端适配(转)

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在提出了Flexible的布局方案,随着viewport单位越来越 ...

Vue项目中使用vw实现移动端适配

我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

如何在Vue项目中使用vw实现移动端适配

有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在提出了Flexible的布局方案,随着 viewport 单位 ...

整理h5移动端适配方案

:https://github.com/amfe/article/issues/17 :https:/ ...

小tips：使用rem+vw实现简单的移动端适配

首先设置meta属性,如下代码:

怎查看linux系统的位数

# uname -a x86_64则说明你是64位内核, 跑的是64位的系统. i386, i686说明你是32位的内核, 跑的是32位的系统

XML 关键字

SGML--Standard Generalized Marked Language 标准通用标记语言GML--Generalized Marked Language 通用标记语言XML--Extes ...

2016沈阳网络赛 odd-even number

odd-even number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

ssm框架的整合

首先创建一个web工程,我这里使用的IDE为eclipse. 结果目录如下: 添加相关的jar包: 接下来是完成配置文件 首先我们先配置web.xml: <?xml version=" ...

HDU&period;5181&period;numbers&lpar;DP&rpar;

题目链接 参考. \(Description\) 将\(1,2,\cdots,n(n\leq 300)\)依次入栈/出栈,并满足\(m(m\leq 90000)\)个形如\(x\)要在\(y\)之前出 ...

WPF Demo2