这篇文章主要介绍“基于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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS作用域用来做什么，与作用域链什么关系

  目录前言一、作用域(scope)1、作用域的分类二、预编译三、作用域链前言我们需要先知道的是引擎，引擎的工作简单粗暴，就是负责javascript从头到尾代码的执行。引擎的一个好朋友是编译器，主要负责代码的分析和编译等；引擎的另一个好朋友就是今天的主角--作用域。那么作用域用来干什么呢？作用域链跟作用域又有什么关系呢？

• Vue.nextTick使用方法是什么，有哪些实用的

  这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• JavaScript变量的用法是怎样，命名规范有哪些

  这篇文章主要介绍了如何理解JavaScript中的变量，帮助大家更好的学习JavaScript，感兴趣的朋友可以了解下

• 如何用JS实现仿百度新闻的导航栏，代码是什么

  这篇文章主要为大家详细介绍了JS实现百度新闻导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue项目用cookie实现登录页面记住密码功能

  我们在做前端项目开发时，往往会遇到登录页面记住密码的需求。那么我们在vue登录页面要如何来实现这样的功能？本文就教大家vue登录页面用cookie实现记住七天密码的功能。感兴趣的朋友继续往下看吧。