日常平凡在挪动端开辟拼页面的过程当中总会碰到一些题目，主假如各手机webview款式显现效果不一致形成的。以下总结了一些罕见坑和一些小技能，愿望对看官有所协助！

本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6举行款式对照。

一、line-height

line-height常常用于笔墨居中，固然也有小伙伴会用高低padding去写.but！不论你用padding照样line-height，差别手机显现效果照样…不一样。

平常会如许写

.demo{
    height:16px;
    line-height:14px;
    font-size:9px;
    border:1px solid #ff6815;
}

嗯，在我们的chrome由于字体小于9px已看不出边框和字之间的间隙了，再来看看Android和IOS的

魅蓝笔墨已飞起~
ios一般显现

假如把line-height加1px，iPhone笔墨就会下移，由于我们app的ios用户占多数，而且android机型太多，差别机型也会显现差别，所以只能退而求其次了。

line-height的兼容题目不太好处理，容器高度越小，显现效果的差异越显著。轻微大一点的高度，最好把line-height设置为高度+1px，两个平台显现都还不错。

二、多行省略

平常我们的产物列表款式，会有题目行数的限定。

怎样完成呢？

.demo{
    display: -webkit-box;    //1.设置display范例为-webkit-box
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;        //2.设置元素超越隐蔽
    text-overflow: ellipsis; //3.设置超越款式为省略号
    -webkit-line-clamp: 2;   //4.设置2行运用省略
    -webkit-box-orient: vertical;
}

如许设置还要斟酌一个极度的状况，就是题目不足两行。详细要看PM的需求，一是空出第二行的间隔，二是让题目下边的元素顶上去。假如是第一种需求，有2种处理的计划。
1：把下边的元素都运用position:absoulte定位到牢固的位置，不受题目行数影响。
2：把题目容器的高度写死，如许写必须要斟酌行高的坑，由于容器高度写死今后，差别机型行高实际上显现效果不一样。

高度写少了，有的机型会如许。

写多了能够会如许。

我的做法是，不影响规划的状况下只管掌握line-height值大一些，行与行的间距变大，容器高度的设定须要多测试一些机型，掌握笔墨不多出也不被盖住。

三、角标的完成

不少项目ui会请求我们画这类梯形角标。题目来了

1.我们不确定角标内容的长度
2.角标的底色不能定死，能定死（能定死的话直接切个小体形就好了）

一般就是一段案牍后边拼接一个三角形，三角形很好写

.script {
    width: 0;
    height: 0;        //掌握宽高为0，用border宽度撑出一个三角形
    border-right: 10px solid transparent;
    border-top: 15px solid #c59c53;
}

我看到的第一种写法是把三角形直接拼在前边的案牍后边，固然这在iphone上是没有题目的。但在部份安卓机型上却会有1像素的间隙，就像如许：

我如今感受到安卓阵营深深的歹意

缘由多是定位在各安卓手机上会有差别的效果。。彷佛人人都是猴子，长的却都不一样。

对此有个好的处理计划：

<p class="rongqi">
    <span class="wenan">跟团游</span>
    <span class="script"></span>
</p>

.rongqi {//容器
    height: 15px;
    overflow: hidden;//设置超越隐蔽
    position: absolute;
    top: 0;
    left: 0;
}
.wenan{//案牍
    float: left;
    position: relative;    //设置相对定位
    z-index: 3;            //设置层级不被三角形盖住
    height: 15px;
    padding-left: 4px;
    line-height: 16px;
    color: #fff;
    font-size: 10px;
}
.script {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 30px solid #c59c53;    //这里的30px实际上远远超越容器的高度
    float: right;                      //就是为了高度超越被盖住做出梯形的效果，兼容种种机型
    margin-left: -9px;
}

假如去除容器的overflow:hidden就能够看的更邃晓：

四、图文题目

一些罕见的规划例如图+案牍的，有多种体式格局能够去写，比方padding-left+background或许position+padding-left或许before伪元素。
前两种要领都能够把图片做到相对的垂直居中，然则它们都是相对整行的容器举行定位的，由于line-height兼容题目的坑，图片实际上不肯定会和笔墨对齐。假如有图文对齐的需求的话，个人发起才用before伪元夙来规划，before能够相对案牍来定位。

p{
    height:44px;
    line-height:45px;
    padding-left:40px;
}
p::before{
    content: '';
    display: inline-block;
    background: url("../img/xxx.png") center center no-repeat;
    background-size: contain;    //这里把背景图片尺寸设置成contain，不须要斟酌图片拉伸的题目
    width: 14px;
    height: 18px;
    margin: 0 5px -4px 0;
}

另有一种状况，我们的图文规划，是从数组中遍历出来的，相似下图：

这类状况更适合position去写，所以写款式肯定要根据差别状况去挑选适宜的体式格局。

五、摆布宽度自适应

第四个小技能末端，图中的规划实际上是分摆布两块的，遵照ui的需求，案牍是要左对齐，数字是要右对齐的。你能够最早想到的是把右边的数字定位或许浮动到那，左侧的容器加上个margin-right或许padding-right。如许能够完成，然则两侧的案牍有极度状况涌现。

效果多是如许的：

也多是如许的

由于你基础不知道两侧案牍的长度究竟是多少。
我的计划是用box规划，左侧的容器设置box-flex:1，右边不论它：

<li class="ent-li">
    <img class="ent-img" src="img/1.png">
    <div class="left">主题门票</div>
    <div class="right">10</div>
</li>

.ent-li {
    margin-left: 45px;
    height: 44px;
    display: -webkit-box; //box规划并做好兼容
    display: box;
    position: relative;
}
.ent-li .left {
    -webkit-box-flex: 1; //box-flex:1掌握宽度自适应
    box-flex: 1;
    text-align: left;
    line-height: 45px;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ent-li .right {    //右边啥都不必管
    text-align: right;
    line-height: 45px;
    font-size: 12px;
    color: #999;
    padding-left: 10px;
}

让我们看看终究极度条件下的显现效果：

或许：

由于pm以为数字更主要，所以让案牍去自适应，数字有多长就多长

六、display:inline-block

尽人皆知，元素有3种基础显现框范例，block块级，inline-block行内块级，inline行内。
inline-block是一种特别存在，能够设置宽高也能够使元素在一行分列。

以下图片信息来自同程旅游app

我在开辟中会碰到以下两种规划：

这两种规划都能够用float:left来写，然则浮动完了还须要清晰浮动。所以能够直接把元素设置成inline-block一样能够自动分列

.rongqi{//每块容器
    display: inline-block;//设置行内块级
    width: 25%;           //设置宽度为1/4
    font-size: 12px;
    text-align: center;
}

这里会有个小坑，就是行内元素在水温和垂直分列的时刻会有间距。形成这类效果

左侧是默许状况下的效果，右边是革新后的效果，左侧第二行和第一行中心有段莫名的间距，这并非我们真正想要的。
处理的方法很简单：

.father{
    font-size:0;//父容器字体大小设置成0，详细的字体大小运用在案牍上
}

七、模仿转动

以下图片信息来自同程旅游app

模仿转动也是在项目中碰到的罕见规划。规划请求弹层出来后，弹层中的内容能够转动，弹层背地的列表不能随弹层转动而转动。而且在弹层上滑动的时刻，全部页面也不能随之转动。
直接上代码：

<section class="father">
    <section class="content-body">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点，防备点击时页面穿透-->
    </section>
    <section class="layout">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点，防备点击时页面穿透-->
    </section>
    <section class="layout-body">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点，防备点击时页面穿透-->
    </section>
</section>

.father{
    height: 533px;
    overflow-y: scroll;//页面高度设置为屏幕高度，一般状况下超越转动
}
.content-body{
    height: 533px;
    overflow-y: scroll;//内容高度设置为屏幕高度，一般状况下超越转动
}
.layout{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000000;
}
.layout-body{
    height: 46%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000001;
}

当我们触启蒙层弹出时掌握款式

.father{
    height: 533px;
    overflow-y: hidden;//设置超越隐蔽，那末页面不会触发转动
}
.content-body{
    height: 533px;
    overflow-y: hidden;//设置超越隐蔽，那末页面不会触发转动
}

这个要领虽然完成了页面模仿转动的效果，然则当蒙层弹出的时刻设置了overflow:hidden会致使页面scrollTop变成0，页面相当于被滚到顶部了。假如UI或许PM不愿意，请与他们撕逼。