zoukankan      html  css  js  c++  java
  • vue-cli项目中使用vw——相比flexible更原生的移动端解决方案

    安装
    命令行输入:

    yarn add postcss-px-to-viewport
    

      

    或 

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

    配置
    package.json中,在postcss中添加代码:

    "postcss": {
    "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
    "viewportWidth": 750,
    "minPixelValue": 1
    }
    }
    },
    

     



    配置项:
    “viewportWidth”: 750, // 设计稿的宽度
    “unitPrecision”: 3, // px转成vw、vh后小数点保留的位数
    “minPixelValue”: 1, // 不转化为vw的最小px值

    使用场景
    vw与vh会在pc与移动端均产生效果,而不像flexible只会转换一定宽度(记得是750px)以下设备的px为rem,因此若设计稿为移动端而生,全权使用vw单位会使得页面在pc端出现字体过大等现象,需酌情处理,根据应用场景自行选择
    vue-cli3.0引入lib-flexible/px2rem

    兼容性
    vw/vh 单位其实出现比较早了,只是以前支持性不太好,现在随着浏览器的发展,大部分(92%以上)的浏览器已经支持了vw/vh

  • 相关阅读:
    SQL-Duplicate Emails
    c#创建可比较对象
    c#扩展方法
    C#Lambda和委托
    C#集合
    c#显示实现接口和隐式实现的区别
    bs同时上传文件以及文件信息
    sql查询数据库中所有 ,数据为空的表
    sql查询所有表名和描述
    MES数据采集模块小结
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/10956622.html
Copyright © 2011-2022 走看看