vue3 响应式rem布局,附带媒体查询

1.安装插件

npm install postcss-loader postcss-pxtorem --save

npm install autoprefixer --save

2.新建postcss.config.js文件跟page.json 同级目录下,写下该代码

module.exports = {
  'plugins': {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'not ie <= 11',  //不考虑IE浏览器
        'ff >= 30', //仅新版本用“ff>=30
        '> 1%',//  全球统计有超过1%的使用率使用“>1%”;
        'last 2 versions', // 所有主流浏览器最近2个版本
      ],
      grid: true ,// 开启grid布局的兼容(浏览器IE除外其他都能兼容grid,可以关闭开启)
    },
    'postcss-pxtorem': {
      rootValue: 192, // 设计稿宽度除以 10,  开头大写的Px 不转换 => height: 100Px, 内联样式不转换,需要 / 75 转成 rem
      unitPrecision: 2, // 计算结果保留 6 位小数
      selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
      propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换
      replace: true, // 转换成 rem 以后,不保留原来的 px 单位属性
      mediaQuery: true, // 允许在媒体查询中转换px。
      minPixelValue: 2, // 设置要替换的最小像素值。
      exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
    }
  }
}

3.在公共方法文件中加入flexble.js,并在main.ts中引入,我这里是放在了src中的utils文件中在main.js中引入

import "@/utils/flexble";

然后重启项目,

但是在窗口无限小的时候,肯定是要固定宽度的,这时候就要用到媒体查询

我们可以在公共样式中设置媒体查询

4.在公共样式文件style中的index添加下面代码,如果需要其他的适配也可以在此添加或修改

/* 屏幕小于1000px的时候写死html的font-size值为100px */
@media screen and (max-width: 1000Px) {
  html {
    font-size: 100Px !important;
    /*no*/
  }
}

5.在main.ts中引入该文件

import "@/styles/index.scss";

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值