挪动端款式小技能

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

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

一、line-height

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

平常会如许写

.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像素的间隙，就像如许：

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

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

对此有个好的处理计划：


跟团游



.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，右边不论它：

主题门票

10

.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

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

.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不愿意，请与他们撕逼。