这篇文章主要介绍“基于vue怎样实现vw布局，代码是什么”，有一些人在基于vue怎样实现vw布局，代码是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

简介

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怎样实现vw布局，代码是什么”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript常用API有什么，含义和用法是怎样的

  这篇文章主要为大家介绍了javascrip高级前端开发中常用的几个API示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步

• 怎样用js写一个循环轮播图的效果？

  怎样用js实现循环轮播图？对于轮播图的应用场景有很多，但是一些新手可能对于循环轮播图的实现不是很了解，对此这篇文章就给大家分享怎样用js写一个循环轮播图的代码，感兴趣的朋友可以参考。

• JS将一个数组旋转k步的思路及操作是什么

  JavaScript如何将一个数组旋转k步？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• 如何掌握vue-router基础知识及其应用

  这篇文章主要介绍了Vue路由vue-router详细讲解指南，对vue-router感兴趣的同学，可以参考下

• 原生JS编写时哪些写法要避免?

  原生JS编写时哪些写法要避免?我们知道原生JS编写是有规范和要求的，而且有良好的代码编写习惯也是很重要的，对此本文就给大家来介绍一下原生JS中应该禁止出现的几种写法，感兴趣的朋友可以了解看看。