zoukankan      html  css  js  c++  java
  • vue中使用vw适配移动端

    推荐看看大漠老师的文章,非常的有收获
    如何在Vue项目中使用vw实现移动端适配


    1.首先在项目中安装依赖
    npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
    
    2.修改.postcssrc.js的配置
    module.exports = {
      "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {},
        "postcss-write-svg": { utf8: false },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
          viewportWidth: 750, // 容器宽度,也可以看作设计图的宽度
          viewportHeight: 1334, // 容器高度,可以不配置
          unitPrecision: 3, // px转换为vw后保留的小数位
          viewportUnit: 'vw', // px需要转换成的单位,使用vw
          selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换为其他单位的的class类
          minPixelValue: 1, // 小于等于1px不转换
          mediaQuery: false // 是否允许在媒体查询中使用px
        },
        "postcss-viewport-units": {},
        "cssnano": {
          preset: "advanced",
          autoprefixer: false,
          "postcss-zindex": false
        }
      }
    }
    

    因为在cssnano中配置了 preset:"advanced",所以需要添加一个依赖

    npm i cssnano-preset-advanced --save-dev
    
    3.添加全局css

    因为postcss-viewport-units会在计算vw时自动添加content内容,但是content会有一定的副作用,所以添加一个全局的css

    img {
        content: normal !important;
    }
    
    4.解决vw兼容问题

    在html中引用viewport-units-buggyfill插件

    <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
    

    然后调用viewport-units-buggyfill

    <script>
        window.onload = function () {
          window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks });
        } 
    </script>
  • 相关阅读:
    InjectAPC全部项目(Win32和Win64位)
    Codeforces Round #377 (Div. 2)
    Codeforces Canada Cup 2016
    UVa 1395 (最小生成树)
    空间表SpaceList
    线程中的临界区的应用
    【题解】狼和羊-C++
    【基础算法-树状数组】入门-C++
    【题解】在你窗外闪耀的星星-C++
    【题解】[NOIP模拟题]我要的幸福-C++
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/10750611.html
Copyright © 2011-2022 走看看