vue项目屏幕自适应（响应式布局）

您所在的位置：网站首页 › vue移动端自适应 › vue项目屏幕自适应（响应式布局）

vue项目屏幕自适应（响应式布局）

2024-06-29 11:02| 来源: 网络整理| 查看: 265

说起屏幕自适应。大家最先想到的是@media媒体查询和rem的方式。

1，媒体查询

通过媒体查询来得到屏幕的宽度，然后对不同宽度下的屏幕做相应的样式处理。这样确实是能够实现，但是太过麻烦，如果设备较多的话，那可真是遭老罪了

@media only screen and (max-width: 100px) { body { background-color: #fff; } } @media only screen and (max-width: 500px) { body { background-color: #ccc; } } @media only screen and (max-width: 1000px) { body { background-color: #ddd; } } 2，rem 布局

rem是弹性布局的一种实现方式,弹性布局可以算作响应式布局一种,但响应式布局不是弹性布局，弹性布局强调等比缩放,100%还原，响应式布局强调不同屏幕有不同的显示，比如媒体查询。 rem 最中要的就是要设置根字体的大小，1rem 就是根字体的大小，所以当我们拿到设计稿的时候，就要通过设计稿去设置根字体的大小。比如我们拿到的375px宽度的设计稿。那我想把设置成100px=1rem 的话如下面所示。把这段代码放到main.js中就行了。然后根据设计稿的px去设置，然后在我们样式中写入rem就行了。这样1px = 0.01rem

import Vue from 'vue' import App from './App.vue' import router from '../../router' import store from '../../store' const cliWidth = document.documentElement.clientWidth document.documentElement.style.fontSize = 100 * (cliWidth/375) + 'px' window.onresize = function(){ const cliWidth = document.documentElement.clientWidth document.documentElement.style.fontSize = 100 * (cliWidth/375) + 'px' } Vue.use(toast) new Vue({ router, store, render: h => h(App) }).$mount('#app')

但是rem也有它的缺点，1，目前 ie 不支持，对 pc 页面来讲使用次数不多； 2.，每次写入的时候我们都要去写成rem，相当麻烦 3，在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

postcss-px-to-viewport插件最最推荐的是postcss-px-to-viewport插件插件来进行相应式布局，

我们只需要下载它，然后配置它，在编写代码的时候就可以完全copy设计稿来写。像rem真是太烦了还有逐个去改首先下载

npm install postcss-px-to-viewport --save-dev yarn add -D postcss-px-to-viewport

然后在根目录下创建postcss.config.js文件，o了一步到位

module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', // 需要转换的单位，默认为"px" viewportWidth: 1920, // 设计稿的视口宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器 '.el','el' minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: [/node_modules/,/\/pages\/mobile\//], // 忽略某些文件夹下的文件或特定文件 include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//) landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw' // 横屏时使用的单位 } } }

就不需要其他操作了，样式完全自适应屏幕的

【本文地址】

vue项目屏幕自适应（响应式布局）

vue项目屏幕自适应（响应式布局）

今日新闻

推荐新闻