移动端开发要做的准备

300毫秒延迟问题

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
 document.addEventListener('DOMContentLoaded', function () {
   FastClick.attach(document.body)
 }, false);
}
if (!window.Promise) {
 document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" ' + '>' + '<' + '/' + 'script>')
}
</script>  

移动端适配(rem)

1. 下载 npm install lib-flexible
2. 引入 在src/main.js 引入 import 'lib-flexible/flexible.js',还要把index.html中的meta标签注释掉,因为这个库会给创建一个meta标签。
3. 转化px为rem达到适配各个屏幕的效果:
   • 说明使用 postcss-px2rem-exclude 这个插件可以设置忽略不转换的文件,从而避免把ui库组件的单位也转换成rem导致样式错乱
   • 下载 npm install postcss-px2rem-exclude -D
   • 配置 在根目录下创建postcss.config.js 代码如下

module.exports = {
    // 这样的配置 在设计稿宽是750的时候可以直接照着设计稿上给出的数值写px 然后这个插件会转换为rem
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            remUnit: 75,  //750的设计稿    
            exclude: /node_modules|folder_name/i   //folder_name是要忽略的包的名 比如element-ui ....
        }
    }
}

• 自己写rem适配
  下面代码 直接放到index.html中就可以了，如果有有比例要求就修改里面的值

 <script>
      (function (doc, win) {
          var docEl = doc.documentElement,
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                  recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if (!clientWidth) return;
                      if(clientWidth>=750){
                          docEl.style.fontSize = '100px';
                      }else{
                          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                      }
                  };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
    </script>

移动端适配(vw vh)

1. 安装插件

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --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,     // // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 1334,    //视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） units to grow to.
            viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false       // 允许在媒体查询中转换`px` queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

3. 配置完.postcssrc.js后就可以写样式代码了,把设计图宽度设置为viewportWidth这个属性的属性值,你写的px就会根据百分比进行转换了,比如值为750,那么750/100 = 7.5px = 1vw,写代码的时候只要照着设计图上的尺寸照着写就行了。

4. 忽略样式(就是一些不需要转换为vw的px值,比如border，margin)

   1. 在标签上加上ignore属性,如下

   <div class="box ignore"></div>
   

   2. 写css样式

   .ignore { //忽略
       margin: 10px;
       background-color: red;
   }
   .box {
       width: 180px;
       height: 300px;
   }
   .hairlines { //hairlines 一般用来忽略边框属性
       border-bottom: 0.5px solid red;
   }
   

5. 插件属性
   这一块内容是参考https://www.jianshu.com/p/1f1b23f8348f此文,完整版可以去观看,有更多的解释

iphoneX适配

1. meta标签设为viewport content属性中加入viewport-fit=cover属性值

//像这样
<meta name="viewport" content="viewport-fit=cover">

2. 入口页面引入样式适配ihonex

  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
   .page {  
     /*constant11.2一下游泳 env11.2及以上有用 */
     /* ios < 11.2 */
     padding-left: constant(safe-area-inset-left);
     padding-top: constant(safe-area-inset-top);
     padding-right: constant(safe-area-inset-right);
     padding-bottom: constant(safe-area-inset-bottom);
     /* ios >= 11.2 */
     padding-left: env(safe-area-inset-left);
     padding-top: env(safe-area-inset-top);
     padding-right: env(safe-area-inset-right);
     padding-bottom: env(safe-area-inset-bottom);
   }

   .page.android {
     padding-top: 28px;
   }
 }