从零开始在vue-cli4配置自适应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-cli 中使用 postcss-px-to-viewport 插件实现移动端自适应
Vue(vue4.0)项目中，使用响应式布局插件postcss-px-to-viewport

到此这篇关于从零开始在vue-cli4配置自适应vw布局的文章就介绍到这了,更多相关从零开始在vue-cli4配置自适应vw布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中使用rem布局代码详解

    1.npm i amfe-flexible 2.import 'amfe-flexible' 然后再,安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 26.7 } } } 在vue项目中使用

  • vue.js template模板的使用(仿饿了么布局)

    使用template实现如下页面(仿饿了么布局) 如上图.使用了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue header.vue代码如下 <template> <div class="header"> 我是header头部 </div> </template> <script type="text/ecmascript-6"> export def

  • vue实现简单瀑布流布局

    vue简单实现瀑布流布局的一种方式(vue瀑布流组件),供大家参考,具体内容如下 vue中的瀑布流布局组件 需求:图片容器宽度固定,高度根据图片自适应,图片一行不能排列时候,换行依次从左往右排列.(瀑布流概念) 另外结合vue-lazy实现懒加载 ( npm i vue-lazyload --save-dev) 使用也很简单,在需要懒加载的img标签上将:src换成v-lazy 父组件传递数据: waterfallData:[ { e_img: "test.jpg", // 图片 e_

  • vue中多路由表头吸顶实现的几种布局方式

    vue项目多路由表头吸顶实现的几种布局方式 因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头吸顶,所以尝试用vux做这种需求, 一.先聊js. A.首先在vux可以这样设置. 1.在state文件中设置状态. techo:{ partsFixed:false, repairFixed:false, mateFixed:false, outRepairFixed:false }//吸顶状态 2.在action中commi

  • vue实现中部导航栏布局功能

    接下来是中部导航栏.我们看到这里的头像动画,和中部导航栏定位都是跟鼠标滚动有关的.我们先将布局实现一下.这里是要求在页面上部分滚动范围内,导航栏一直在div的上部,随着鼠标的滚动而改变位置.到下部分滚动范围,导航栏就一直固定到页面的上部分. 这里需要注意两个地方 这里需要一个覆盖不了的区域,可以给人一种更好开关屏的感觉.而且中部导航栏下方区域的内容,在下滑的时候不能出现在这个区域. 一定要注意 尽可能的少进行DOM操作,这样是非常影响性能的 ! 监听鼠标滚动事件 private fixedFla

  • Vue.js实现网格列表布局转换方法

    Vue.js实现网格列表布局转换方法

    实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&quo

  • vue 实现 rem 布局或vw 布局的方法

    一.实现 rem 布局 移动端 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 方法一.在 index.html 或者 main.js 中添加以下代码: const setHtmlFontSize = () => { let deviceWidth = document.documentElement.clientWidt

  • 从零开始在vue-cli4配置自适应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, sourceM

  • Vue前端项目自适应布局的简单方法

    Vue前端项目自适应布局的简单方法

    目录 一.单位尺寸 二.基于rem实现自适应布局 附:html5页面 的rem 布局适配方法 总结 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位:rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小. 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px.

  • vue cli4.0 如何配置环境变量

    vue cli4.0 如何配置环境变量

    目录 1.创建不同环境变量文件 2.给.env文件添加内容 3.在package.json中添加不同环境对应的执行语句 4.使用 温馨提示:本文只适用于vue-cli 3.0及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配置不同的环境变量呢? 为了更加方便消化本文章,建议先看下官方文档: 环境变量和模式 看完官方的文档如果还没有明白,可以参考本文. 在vue-cli构建的项目中,默认有3种模

  • vue cli4中mockjs在dev环境和build环境的配置详情

    vue cli4中mockjs在dev环境和build环境的配置详情

    目录 mockjs在dev和build环境的配置 cli4中环境配置 自定义配置环境 mockjs在vue cli4开发环境的配置及使用 vue中mockjs搭建使用说明 安装 项目搭建 项目配置 项目测试 开发流程 mockjs在dev和build环境的配置 cli4中环境配置 这里参考了这位的文章: vue-cli4.0多环境配置,变量与模式.写的很详细,大家可以移步去康康~~~ 默认情况下,Vue cli有三种开发模式:development,production,test. 自定义配置环

  • @vue/cli4.x版本的vue.config.js常用配置方式

    @vue/cli4.x版本的vue.config.js常用配置方式

    目录 @vue/cli4.x的vue.config.js常用配置 vue-cli4.*配置vue.config.js文件配置内容不生效 解决 @vue/cli4.x的vue.config.js常用配置 设置访问端口号.访问IP地址.跨域代理,路径别名 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • Vue CLI4 Vue.config.js标准配置(最全注释)

    前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression

  • 解决vue cli4升级sass-loader(v8)后报错问题

    sass-loader报错: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schem a.  - options has an unknown propert

  • vue移动端自适应适配问题详解

    vue移动端自适应适配问题详解

    1.vue ui创建项目 2.选择基本配置项 3.运行项目 4.新建rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改. const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSiz

随机推荐