vue 使用 flexible 适配移动端（包含平板）

作者: zx一个胖子 | 来源:发表于2020-01-02 10:36 被阅读0次

vue 使用 flexible 适配移动端（包含平板）
移动端如何适配？
vue 使用lib-flexible、px2rem-loader
vue-cli 3.0+vant项目使用postcss-pxto
我的收藏
Vue-cli 3.0 px转rem移动端适配方案
基于vue-cli3在vue中实现rem布局：postcss-p
【经验分享】 px2rem-loader并不能格式化scss的样
maizuo-mobile技术栈
vue中自动px转为rem

一. 引入淘宝 flexible
Flexible会将视觉稿分成100份，而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：(设计稿为750px为例）
1a = 7.5px
1rem = 75px
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。
* 更多关于 flexible 的作用与用法请自行查询
flexible 的cdn地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

二. 适配平板
如果只是单纯的引入flexible，在平板上并不是能够完成适配
所以要加上这样一段代码（与引入的flexible 有先后顺序）：

<script>
      ;/(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Android)/i.test(navigator.userAgent) &&
        ((head = document.getElementsByTagName('head')),
        (viewport = document.createElement('meta')),
        (viewport.name = 'viewport'),
        (viewport.content =
          'target-densitydpi=device-dpi, width=375px, user-scalable=no'),
        head.length > 0 && head[head.length - 1].appendChild(viewport))
</script>

整体index.html 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    //该行要注释
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="cache-control" content="no-siteapp">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="apple-mobile-web-app-capable"content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"content="black"/>
    <script>
      ;/(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Android)/i.test(navigator.userAgent) &&
        ((head = document.getElementsByTagName('head')),
        (viewport = document.createElement('meta')),
        (viewport.name = 'viewport'),
        (viewport.content =
          'target-densitydpi=device-dpi, width=375px, user-scalable=no'), // 375为设计稿的一半
        head.length > 0 && head[head.length - 1].appendChild(viewport))
    </script>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <title>标题</title>
  </head>
  <body>
    <div id="kalaMaster"></div>
    <!-- built files will be auto injected -->
    <script src="https://images.aiyingshi.com/VUELib/js/axios.min.js"></script>
    <script src="https://images.aiyingshi.com/VUELib/js/vue.min.js"></script>
  </body>
</html>

三. 单位转化 px转为rem
安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude
在项目根目录找到 .postcssrc.js 修改为

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      "remUnit": 75,  //换算的基数，1rem == 75px
      "exclude": /node_modules/i   //屏蔽第三方组件库，避免把第三方组件库的px也转成rem，这里是屏蔽了所有第三方，也可以屏蔽单独的某一个第三方组件库。
    }
  }
}

四. 字体建议使用px
如果有slogan之类大于48px的，可以使用rem
* 此时会有一个问题，就是当你使用 scss/sass 的时候使用 /no/和/px/ 来屏蔽字体大小的时候是不生效的，只有在css中才会生效，解决办法比较偷鸡把单位 px 改为 Px/PX

//util.js
@mixin px2px($n){
  font-size: $n * 1Px;
  [data-dpr="2"] & {
    font-size: $n * 1Px;
  }
  // for mx3
  [data-dpr="2.5"] & {
    font-size: ($n * 2.5 / 2) * 1Px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
    font-size: ($n * 2.75 / 2) * 1Px;
  }
  [data-dpr="3"] & {
    font-size: ($n / 2 * 3) * 1Px;
  }
  // for 三星note4
  [data-dpr="4"] & {
    font-size: $n * 2Px;
  }
}
@mixin f32px{
  @include px2px(32);
}
@mixin f28px{
  @include px2px(28);
}
@mixin f26px{
  @include px2px(26);
}
@mixin f24px{
  @include px2px(24);
}
@mixin f22px{
  @include px2px(22);
}
@mixin f20px{
  @include px2px(20);
}
@mixin f18px{
  @include px2px(18);
}
@mixin f16px{
  @include px2px(16);
}
@mixin f14px{
  @include px2px(14);
}
@mixin f12px{
  @include px2px(12);
}
@mixin f10px{
  @include px2px(10);
}
//使用时   @include f12px   就可以了

在实际使用的时候还会遇到一个问题是需要在js中计算 px转rem ， flexible其实是有写好的方法的