首页 前端知识 vue项目屏幕自适应(响应式布局)

vue项目屏幕自适应(响应式布局)

2024-01-24 15:01:13 前端知识 前端哥 325 718 我要收藏

说起屏幕自适应。大家最先想到的是@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' // 横屏时使用的单位
      }
    }
  }

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/111.html
评论
发布的文章

jQuery AJAX请求的统一封装

2024-02-01 12:02:53

jQuery知识学习

2024-02-01 12:02:53

JQuery——动画效果

2024-02-01 12:02:52

jQuery复习

2024-02-01 12:02:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!