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

  • 相关阅读:
    属性绑定与双向数据绑定
    vue基础
    tp5提交留言入库
    tp5表单提交
    TP5分页
    TP5模板与数据组合
    vue3.x使用Proxy做双向数据绑定总结
    vue2.x响应式原理总结
    HTML5移动端自适应解决方案
    springMVC实现文件上传
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/10956622.html
Copyright © 2011-2022 走看看