zoukankan      html  css  js  c++  java
  • autoprefixer插件的使用踩坑

    这个插件主要配合打包自动添加css浏览器兼容前缀,比如-webkit-、-ms-等。官网:https://github.com/postcss/autoprefixer

    这是PostCSS的插件,根据官网,配置参数有两种方式

    没有特殊要求用defaults配置即可。本人的基础配置如下

    // package.json
    {
      "browserslist": [
        "last 2 version",
        "> 0.2%",
        "maintained node versions",
        "not dead"
      ]
    }

    坑1:国内浏览器占比和全球的完全不同

    上面的“> 0.2%”从理论上来说已经覆盖了绝大部分浏览器。但是中国的浏览器占比和全球的完全不同,在中国IE各个版本还有一大堆。

    按上面的配置,css代码

    .view-container {
        display: flex;
        justify-content: center;
         100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    转换结果没有任何变化。

    期望的是能够兼容到ie10+和低版本的chrome的兼容写法。解决办法有多种。

    1.配置加上中国的特有浏览器比例

    推荐,这样能覆盖到中国和世界的绝大多数浏览器】

    // package.json
    {
      "browserslist": [
        "last 2 version",
        "> 0.2%",
        "maintained node versions",
        "not dead",
        "> 0.2% in CN"
      ]
    }

    上面的css编译后结果为

    .view-container{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
         100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    2.设置要支持的浏览器的版本

    比如

    // package.json
    {
      "browserslist": [
        "last 2 version",
        "> 0.2%",
        "maintained node versions",
        "not dead",
        "iOS >= 7",
        "Android >= 4.1",
        "IE >= 10"
      ]
    }

    上面的css编译结果为

    .view-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
         100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    根据自己的实际情况配置即可

  • 相关阅读:
    python爬虫之requests库
    python爬虫之urllib库
    fiddler配置及使用教程
    react中受控组件相关的warning
    Sublime Text 自动生成文件头部注释(版权信息):FileHeader 插件的使用
    手动安装sublime插件babel-sublime
    自定义组件 点击空白处隐藏
    pagination分页(支持首页,末页,跳转)
    vue打包以后,除了首页意外,其余页面是空白
    pm2踩过的坑
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/12973316.html
Copyright © 2011-2022 走看看