vue项目中使用vw/vh

vw/vh这个单位可以根据电脑浏览器自适应
　vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN
在pc端，视口宽高就是浏览器得宽高；

在项目中引入插件

npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev
npm i postcss-px-to-viewport-opt

然后在根目录下面创建postcss.config.js

module.exports = {plugins: {"autoprefixer": {path: ['./src/*']},"postcss-import": {},"postcss-px-to-viewport-opt": {"viewportWidth": "1920", //视窗的宽度，对应的是我们设计稿的宽度"viewportHeight": "1080", // 视窗的高度"unitPrecision": 2, //指定`px`转换为视窗单位值的小数位数(很多时候无法整除)"viewportUnit": "vw", //指定需要转换成的视窗单位，建议使用vw"selectorBlackList": ['#nprogress'], //指定不转换为视窗单位的类"minPixelValue": 1, // 小于或等于`1px`不转换为视窗单位"mediaQuery": false, // 允许在媒体查询中转换`px`// "exclude": /(\/|\\)(node_modules)(\/|\\)/},}
};

然后重启项目
之后就可以在页面中写

.icon{color: $defaultColor;font-size: 26px;}

实际上编译之后的效果是这样的

这样就避免了再不用宽度的浏览器页面显示的字体大小问题了

vue项目中使用vw/vh相关推荐

如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
转：如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...

vue项目中使用vw/vh

vue项目中使用vw/vh相关推荐

最新文章

热门文章