vue页面自适应,vue 响应式自适应布局
在前端开发中，我们经常会遇到这样的困惑。设计师给你的设计稿大小和页面大小不一致，导致页面无法正常显示。下面这篇文章主要介绍一个vue页面自适应布局的解决方案的相关信息。有需要的可以参考一下。
目录
安装依赖于可配置项参数，重启项目摘要兼容vue2和vue3项目，vue文件中style的单位为px，编译时自动转换为vw、vh等单位。
安装依赖
npm安装post CSS-px-to-viewport-save-dev
vue.config.js的一般配置
模块.导出={
//将以下代码添加到//module.exports公开的最外层
css: {
requireModuleExtension: true，
sourceMap:没错，
//全局样式
loaderOptions: {
postcss: {
插件：[
require( postcss-px-to-viewport )({
UnitToConvert: px ，//要转换的单位，默认值为 px
ViewportWidth: 1920，//窗口的宽度，对应pc设计稿的宽度，一般是1920。
ViewportHeight: 1080，//窗口的高度对应我们设计稿的高度。我做的是监控大屏，身高1080。
UnitPrecision: 6，//单位转换后保留的精度。
propList: [
//可以转换成vw的属性列表
*,
//!字体大小，
],
ViewportUnit: vw ，//要使用的视口单位
TVIEWPortUnit: VW ，//字体使用的视口单位
SelectorBlackList: []，//需要忽略的CSS选择器不会转换为视口单位，会使用px等原始单位。
PixelValue: 1，//设置最小转换值。如果为1，则只转换大于1的值。
MediaQuery: false，//媒体查询中的公司是否需要转换？
Replace: true，//是否直接替换属性值而不添加替代属性？
排除：[/(\/ \ \) (node_modules) (\ / \)/，/\ components \/report detail list \/toll _ administration \/SF-report . vue/]，//忽略某些文件夹或特定文件中的文件。
}),
],
},
}
}
}
可配置项参数
UnitToConvert (String)是要转换的单位，默认为 pxviewportWidth (Number)设计草图的视口宽度。unitPrecision (Number)单位转换后保留的精度propList (Array)可以转换成vw的属性列表，传入具体的CSS属性。您可以传入通配符“”来匹配所有属性，例如：[ ]；在属性之前或之后添加“*”以匹配特定属性。(比如[位置]会匹配背景-位置-y)添加！在特定属性之前，该属性的单位不会被转换。比如：[* ！字母间距]，字母间距！和可以组合使用，例如：[ ，！Font*]，具有字体大小和字体粗细等属性的viewportUnit (String)将不会被转换fontViewportUnit (String)需要忽略字体使用的视口单元selectorBlackList (Array)。CSS选择器不会转换为视口单位，将使用原始单位，如px。如果输入值是一个字符串，只要选择器包含输入值，它就会被匹配。
例如，如果selectorBlackList是[body]，则。body-class将被忽略。如果传入的值是正则表达式，它将基于CSS选择器是否匹配正则表达式。
例如，如果selectorBlackList为[/body $/]，那么body将被忽略，而。body不会为minPixelValue (Number)设置最小转换值。如果为1，则只转换大于1的值。mediaQuery (Boolean)中的单位需要转换吗？replace (Boolean)直接替换属性值，不添加替代属性exclude (Array或Regexp)来忽略某些文件夹或特定文件中的文件。例如，如果“node_modules”下的文件的值是正则表达式，则符合此规则的文件将被忽略。如果传入的值是一个数组，数组中的值必须是一个常规的include (Array或Regexp)。如果设置了include，则只转换匹配的文件。例如，只有“src/mobile”(include:/\/src \/mobile \/)下的文件才会被转换。如果值是正则表达式，将包含匹配文件，否则将排除匹配文件。如果传入的值是一个数组，那么数组中的值必须是regular landscape(布尔值)。是否添加由landscapeWidth生成的媒体查询条件@ media(orientation:landscape)landscape unit(string)。横向宽度使用的横向宽度单位(数字)是视口宽度。
重启项目
注意：只能更改style lang=less scoped/style中的单位，行中的样式不能自适应转换。
总结
关于解决vue页面自适应布局的这篇文章到此为止。更多关于vue页面自适应布局的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。