从零开始在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 相关文章推荐
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
js arguments对象应用介绍
Nov 28 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 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
PHP环境搭建最新方法
2006/09/05 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
python3字符串操作总结
2019/07/24 Python
python生成任意频率正弦波方式
2020/02/25 Python
python利用opencv保存、播放视频
2020/11/02 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
创业计划书的内容步骤和要领
2014/01/04 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
《母鸡》教学反思
2014/02/25 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
小学生综合素质评语
2014/04/23 职场文书
大气污染防治方案
2014/05/19 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS