基于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: {}
}
}
}
}

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

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

参考:

nuxt中如何添加postcss插件:https://zh.nuxtjs.org/faq/postcss-plugins/#%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0-postcss-%E6%8F%92%E4%BB%B6-

postcss-px-to-viewport: https://github.com/evrone/postcss-px-to-viewport

再聊移动端页面的适配(收费):https://www.w3cplus.com/css/vw-for-layout.html

再聊移动端页面的适配(转载):https://blog.csdn.net/qq_21729177/article/details/79466951

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

全面复工啦~

使用vw进行移动端适配(nuxt项目)的更多相关文章

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

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

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

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

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

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

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

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

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

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

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

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  7. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

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

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  9. nuxt项目服务端渲染应用部署、使用pm2守护进程及遇到的问题处理

    服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { &q ...

随机推荐

  1. 【雕爷学编程】Arduino动手做(61)---电压检测传感器

    37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的.鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为 ...

  2. router-link传参

    果然还好是一小部分一小部分记录的好. <router-link :to="info">中:to特性可以是路径str,也可以是一个对象形式str. 当info是对象时可以 ...

  3. Mysql之Linux中mariadb主从复制

    master主机mysql安装配置 1.下载mariadb(Centos7开始mysql的名字) (1)其它方式(不推荐):rpm安装/软件源安装 (2)yum安装(推荐): ①centos官方的yu ...

  4. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  5. JavaDoc文件如何生成

    目录 如何使用 1.通过命令行生成JavaDoc文档 2.IDEA如何配置后生成javadoc文档 javadoc命令是用来生成自己的API文档的 参考信息: @author 作者名 @version ...

  6. Java Number & Math类

    java Number类 Java的内置数据类型有byte.int.long.double等. Java 语言为每一个内置数据类型提供了对应的包装类. int对应的包装类为Integer long对应 ...

  7. 【Redis】String应用场景

    单值缓存 SET key value GET key 对象缓存 SET user: value(json格式数据) MSET user::name value1 user::balance value ...

  8. Kubernetes学习笔记(六):使用ConfigMap和Secret配置应用程序

    概述 本文的核心是:如何处理应用程序的数据配置. 配置应用程序可以使用以下几种途径: 向容器传递命令行参数 为每个容器配置环境变量 通过特殊的卷将配置文件挂载到容器中 向容器传递命令行参数 在Kube ...

  9. web自动化之alert弹窗操作

    from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...

  10. Life In Changsha College- 第四次冲刺

    第四次冲刺任务 整体功能实现. 用户故事 用户打开“生活在长大”的界面,选择登录 已注册过则输入用户名和密码直接登录 未注册用户则可选择注册功能,注册成功后登录 登录成功则弹出提示框 进行留言 系统结 ...