从零开始在vue-cli4配置自适应vw布局的实现


Posted in Javascript onJune 08, 2020

简介

viewportWidth也是vw布局从配置上来说比rem布局简洁了很多,bu需要配置安装lib,也不需要增加一个rem.js文件

简称拎包使用

安装包

npm install postcss-px-to-viewport -D

或者

yarn add postcss-px-to-viewport -D

配置移动端

在vue.config.js中找到loaderOptions,如果没有的话需要在css属性下增加postcss

css: {
  extract: IS_PROD,
  sourceMap: false,
  loaderOptions: {
   postcss: {
    plugins: [
     require("postcss-px-to-viewport")({
      unitToConvert: "px",	// 需要转换的单位,默认为"px"
      viewportWidth: 375,  // 视窗的宽度,对应移动端设计稿的宽度,一般是375
      // viewportHeight:667,// 视窗的高度,对应的是我们设计稿的高度
      unitPrecision: 3,		// 单位转换后保留的精度
      propList: [		// 能转化为vw的属性列表
       "*"
      ],
      viewportUnit: "vw",		// 希望使用的视口单位
      fontViewportUnit: "vw",		// 字体使用的视口单位
      selectorBlackList: [],	// 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
      minPixelValue: 1,		// 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
      mediaQuery: false,		// 媒体查询里的单位是否需要转换单位
      replace: true,		// 是否直接更换属性值,而不添加备用属性
      exclude: /(\/|\\)(node_modules)(\/|\\)/,		// 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
     })
    ]
   }
  }
 },

效果

不同型号下,我们看到字体大小都会跟着改变

从零开始在vue-cli4配置自适应vw布局的实现 

配置pc端

css: {
  extract: IS_PROD,
  sourceMap: false,
  loaderOptions: {
   postcss: {
    plugins: [
     require("postcss-px-to-viewport")({
      unitToConvert: "px",	// 需要转换的单位,默认为"px"
      viewportWidth: 1920,  // 视窗的宽度,对应pc设计稿的宽度,一般是1920
      // viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度
      unitPrecision: 3,		// 单位转换后保留的精度
      propList: [		// 能转化为vw的属性列表
       "*"
      ],
      viewportUnit: "vw",		// 希望使用的视口单位
      fontViewportUnit: "vw",		// 字体使用的视口单位
      selectorBlackList: [],	// 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
      minPixelValue: 1,		// 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
      mediaQuery: false,		// 媒体查询里的单位是否需要转换单位
      replace: true,		// 是否直接更换属性值,而不添加备用属性
      exclude: /(\/|\\)(node_modules)(\/|\\)/,		// 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
     })
    ]
   }
  }
 },

效果

我们以字体为例,同样可以看到字体在不同分辨率的情况下是不一样大小的

从零开始在vue-cli4配置自适应vw布局的实现

参考资料

vue-cli 中使用 postcss-px-to-viewport 插件实现移动端自适应
Vue(vue4.0)项目中,使用响应式布局插件postcss-px-to-viewport

到此这篇关于从零开始在vue-cli4配置自适应vw布局的文章就介绍到这了,更多相关从零开始在vue-cli4配置自适应vw布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
Javascript基础教程之变量
Jan 18 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue的路由映射问题及解决方案
Oct 14 Javascript
vue实现简单图片上传
Jun 30 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 #Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 #Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 #Javascript
基于javascript处理二进制图片流过程详解
Jun 08 #Javascript
vue-router的hooks用法详解
Jun 08 #Javascript
Vue自定义render统一项目组弹框功能
Jun 07 #Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 #Javascript
You might like
url decode problem 解决方法
2011/12/26 PHP
YII实现分页的方法
2014/07/09 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
高中政治教学反思
2014/01/18 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
高三毕业寄语
2014/04/10 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
检讨书怎么写?
2019/06/21 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis