从零开始在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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JavaScript中string对象
Jun 12 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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/10/09 PHP
实用函数10
2007/11/08 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python发送邮件脚本
2018/05/22 Python
Python实现随机漫步功能
2018/07/09 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
专题组织生活会思想汇报
2014/10/01 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
租赁协议书
2015/01/27 职场文书
中标通知书
2015/04/17 职场文书
生日寿星公答谢词
2015/09/29 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Elasticsearch 聚合查询和排序
2022/04/19 Python