从零开始在vue-cli4配置自适应vw布局的实现
更新时间:2020年6月9日 08:05 点击:2806
简介
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' 下的文件 }) ] } } },
效果
不同型号下,我们看到字体大小都会跟着改变
配置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-cli 中使用 postcss-px-to-viewport 插件实现移动端自适应
Vue(vue4.0)项目中,使用响应式布局插件postcss-px-to-viewport
到此这篇关于从零开始在vue-cli4配置自适应vw布局的文章就介绍到这了,更多相关从零开始在vue-cli4配置自适应vw布局内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: 浅谈vue的第一个commit分析
下一篇: 详解Vue Cli浏览器兼容性实践
相关文章
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 本文章来为各位一篇关于echarts使图标能自适应浏览器窗口变化,及经纬度转换的例子,希望文章能够帮助到各位同学哦。 1、echarts使图标能自适应浏览器窗口变化 wind...2016-09-20
- 这篇文章主要为大家详细介绍了Vue实现大屏页面的屏幕自适应,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-22
- 这篇文章主要介绍了vue完美实现el-table列宽自适应,对vue感兴趣的同学,可以参考下...2021-05-08
总结几种解决子级div应float浮动让父级div高度不能自适应的办法【菜鸟收藏】
现在是我还在菜鸟时遇到的子DIV css float浮动引起的父级div不能自适应高度时,收藏的几个解决办法,希望对新手有所帮助。 解决子级对象使用css float浮动 而父级div...2016-09-14Markdown与Bootstrap相结合实现图片自适应属性
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。 Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来...2016-05-19- 自适应在开发应用中用到的比较多了我们下面来看一篇关于CSS布局自适应模块等分比例经典例子,希望对各位有用。 CSS等比例划分,在CSS布局中是比较重要的,运行以下代码...2016-09-14
android开发中 PopupWindow 自适应宽度布局
PopupWindow在android.widget包下,弹出窗口的形式展示。PopupWindow弹出的菜单随内容的宽度自适应,重写ListView的onMeasure()方法是个不错的解决办法。 PopupWind...2016-09-20- 在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。 第一种方法:做一个网页解决问题(长了点) 如果只是因为浏览者改变了浏...2016-09-20
- 第一种方法:做一个网页解决问题(长了点) 如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我...2016-09-20
- 同域、子页面高度不会动态增加 这种情况最简单,直接通过脚本获取字页面实际高度,修改iframe元素高度即可。但有二点必须注意: 如果页面内有绝对定位或者没有清浮动的元素...2016-09-20
- 这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-30
- 下面小编就为大家带来一篇浅谈innodb的索引页结构,插入缓冲,自适应哈希索引。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-03
- 本文主要介绍了wap手机端懒加载分页,web电脑端懒加载分页以及web电脑端footer底部固定。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 这篇文章主要介绍EasyUI高度自适应的问题,比较实用,需要的朋友可以参考下。...2016-06-12
- 很多时候我们需要用图表来制作我们统计的数据直观的分析,所以我们可以用Echarts来制作图表,这篇文章主要给大家介绍了关于Echats图表大屏自适应的实现方法,需要的朋友可以参考下...2021-10-24
- 我们经常上网页的时候,如果注意到一些大的网站比如taobao.com等,就会发现他们有三栏布局,中间自动适应,两边固定宽度,同在我们来讲讲实现这种布局的两种方法。 三栏布...2016-09-14
- 以前我在做网站时出也会因为css因float引起div高度自适应无效,后来问了一个设计师他说加个overflow:hidden就KO了,现在分享给大家。 代码如下 复制代码...2017-07-06
- 一个超简单的方法可快速实现WebView自适应屏幕宽度,希望此方法对各位同学有所帮助。 // 让网页自适应屏幕宽度 代码如下 复制代码 WebSetti...2016-09-20