vue使用viewport适配

使用viewport适配

之前做移动端适配时,基本上是采用rem方案,现在发现了一个新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持

postcss-px-to-viewport,将px单位自动转换成viewport单位,用起来超级简单,postcss-px-to-viewport 文档

安装

npm install postcss-px-to-viewport --save-dev

在vue.config.js中:

const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
      //全局变量
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtoviewport({
                viewportWidth: 375,
                // selectorBlackList: ['ignore', '__KEFU__emoji-'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
                // minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
                // mediaQuery: false     // 允许在媒体查询中转换`px`
              })
            ]
          },
          scss: {
            prependData: `@import "~@/assets/css/variables.scss";@import "~@/assets/css/mixins.scss";`
          }
        }
      }
  }
  

参数解析

{
unitToConvert: 'px'
viewportWidth: 320,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}

  • unitToConvert (String) 要转换的单位,默认是’px’

  • viewportWidth (Number)

  • viewport的宽度,默认是320,可根据设计稿来,750的设计稿就写750

  • unitPrecision (Number) 指定px转换为视窗单位值的小数位数,默认是5

  • propList (Array) 指定可以转换的css属性,默认是[’*’],代表全部属性进行转换

  • 精确匹配

  • *代表全部属性

  • 在字符串前面或者后面用*,如 [‘position’] 会匹配background-position-y

  • 用!则该属性排除. 如: [’*’, ‘!letter-spacing’]

  • Combine the “not” prefix with the other prefixes. Example: [’’, ‘!font’]

  • viewportUnit (String)指定需要转换成的视窗单位,默认vw

  • fontViewportUnit (String)指定字体需要转换成的视窗单位,默认vw

  • minPixelValue (Number) 默认值1,小于或等于1px不转换为视窗单位,

  • mediaQuery (Boolean) 是否在媒体查询时也转换px,默认false

  • exclude (Array or Regexp) 设置忽略文件,如node_modules

  • 如果是regexp, 忽略全部匹配文件.
  • 如果是数组array, 忽略指定文件.

可能遇到的问题

1、@keyframes 和media查询里的px默认是不转化的,设置mediaQuery: true则媒体查询里也会转换px

@keyframes可以暂时手动填写vw单位的转化结果

参考链接

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值