从零开始在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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
js验证上传图片的方法
May 12 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
javascript实现密码验证
Nov 10 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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
10个实用的PHP代码片段
2011/09/02 PHP
如何判断php数组的维度
2013/06/10 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python递归函数特点及原理解析
2020/03/04 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
总经理职责范文
2013/11/08 职场文书
体育教育专业毕业生自荐信
2013/11/15 职场文书
二年级数学教学反思
2014/01/21 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL