欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

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

时间:2020-06-10|栏目:JavaScript|点击:

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-cli4配置自适应vw布局的文章就介绍到这了,更多相关从零开始在vue-cli4配置自适应vw布局内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

上一篇:详解Vue Cli浏览器兼容性实践

栏    目:JavaScript

下一篇:浅谈vue的第一个commit分析

本文标题:从零开始在vue-cli4配置自适应vw布局的实现

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1672.html

您可能感兴趣的文章

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7