安卓4.4.4以下手机的兼容性问题
一 兼容性加前缀问题。
加前缀这些，如果不清楚，在vue项目中有如下配置，在npm run serve 下写不带前缀的，在F12下再去粘贴自动生成的带前缀的即可。
postcss: {
plugins: [
require('autoprefixer'),
require('postcss-plugin-px2rem')({
rootValue: 37.5, // 换算的基数
selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*']
})
]
}
二移动端看日志。
<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
三ios抓包（https也行）
只需要在ios手机上装charles插件，并允许。
安卓抓http只需装charles插件，抓https需要安装VirtualXposed。
一 flex布局这些是有顺序的，左右顶齐，均分空隙：
display: flex;
display: -ms-flexbox;
display: -webkit-box;
justify-content: space-between;
-ms-flex-pack: space-between;
-webkit-box-pack: justify;
左右顶齐，均分空隙(简化版)：
display: -webkit-box;
-webkit-box-pack: justify; //左右顶齐
上下顶齐，均分空隙：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: justify;
上下方向居中：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-webkit-justify-content: center;
-webkit-box-pack: center;
左右居中：
margin:0 auto;
或：
text-align:center;
或：
display: -webkit-box;
-webkit-box-pack: center;
1 安卓4.4.4以下手机，vh不好使。
2 块级里放行内，只要text-align都有效。
3 justify-content: space-around;在box那版不兼容。所以在安卓4.4.4以下不兼容。它是都均分空隙。代替是50% 33.3333% 用宽度代替。
例如：<div :class="{'threeP':tblist[0].show,'active':tbactive==index,'twoP':!tblist[0].show}" v-for="(item,index) in tblist" :key="item.title" @click="clickTab(item,index)" v-if="item.show">
4 要想z-index有效，只需要给一个position：relative就行。Z-index 仅能在定位元素上奏效。
阅微小框框放字：
.model_2 .wrap .books .intro .type {
display: inline-block;
float: left;
background: #fff;
height: .426667rem;
line-height: 0.48rem;
padding: 0 .1rem;
font-size: .266667rem;
color: #8BAEB1;
letter-spacing: 0;
//margin-bottom: .053333rem;
position: relative;
}
.model_2 .wrap .books .intro .type:after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 0.03667rem solid #A3C1C4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 0.13333rem;
}
二 只用到flex的时候，这样写：
display: flex;
display: -ms-flexbox;
display: -webkit-box;
三 固定定位的时候，要写top，4.4.4以下手机不行，不然到处动
position: fixed;
top:0;
z-index: 1001;
四 做排行的时候，切换小标签换接口，img不换，所以去掉了v-lazy就好了，做鸿雁注意
五 在做线条的时候，4.4.4以下手机，2px scale(0.5)会出不来
六 小框框放字，一般这么写
.span2{
display: inline-block;
//float: right;
background: #fff;
height: .426667rem;
line-height: 0.48rem;
padding: 0 .1rem;
font-size: .266667rem;
color: #8BAEB1;
letter-spacing: 0;
//margin-bottom: .053333rem;
position: relative;
}
.span2:after{
content: "";
position: absolute;
top: 0;
left: 0;
border: 2px solid #A3C1C4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 10px;
}
两行省略...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
