移动端款式小技巧

　　平常在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview款式显现作用纷歧致形成的。以下总结了一些常见坑和一些小技巧，期望对看官有所协助!

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

　　一、line-height

　　line-height常常用于文字居中，当然也有小伙伴会用上下padding去写.but!不论你用padding仍是line-height，不同手机显现作用仍是...纷歧样。

　　一般会这样写

1. .demo{ 
2.  
3. 　　height:16px; 
4.  
5. 　　line-height:14px; 
6.  
7. 　　font-size:9px; 
8.  
9. 　　border:1px solid #ff6815; 
10.  
11. 　　} 

　　

 

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

　　

魅蓝文字现已飞起~

 

　　

ios正常显现

 

　　假如把line-height加1px，iPhone文字就会下移，由于咱们app的ios用户居多，而且android机型太多，不同机型也会显现不同，所以只能退而求其次了。

　　line-height的兼容问题不太好处理，容器高度越小，显现作用的间隔越显着。略微大一点的高度，最好把line-height设置为高度+1px，两个渠道显现都还不错。

　　二、多行省掉

　　一般咱们的产品列表款式，会有标题行数的约束。

　　

 

　　怎样完结呢?

1. .demo{ 
2.  
3. 　display: -webkit-box; //1.设置display类型为-webkit-box 
4.  
5. 　font-size: 14px; 
6.  
7. 　line-height: 18px; 
8.  
9. 　overflow: hidden; //2.设置元素超出躲藏 
10.  
11. 　text-overflow: ellipsis; //3.设置超出款式为省掉号 
12.  
13. 　-webkit-line-clamp: 2; //4.设置2行运用省掉 
14.  
15. 　-webkit-box-orient: vertical; 
16.  
17. 　} 

　　这样设置还要考虑一个极点的状况，便是标题缺乏两行。详细要看PM的需求，一是空出第二行的间隔，二是让标题下边的元素顶上去。假如是榜首种需求，有2种处理的计划。

　　1：把下边的元素都运用position:absoulte定位到固定的方位，不受标题行数影响。

　　2：把标题容器的高度写死，这样写必需求考虑行高的坑，由于容器高度写死今后，不同机型行高实际上显现作用纷歧样。

　　

高度写少了，有的机型会这样。

 

　　

写多了或许会这样。

 

　　我的做法是，不影响布局的状况下尽量操控line-height值大一些，行与行的距离变大，容器高度的设定需求多测验一些机型，操控文字不多出也不被挡住。

　　三、角标的完结

　　

 

　　不少项目ui会要求咱们画这种梯形角标。问题来了

　　1.咱们不确定角标内容的长度

　　2.角标的底色不能定死，能定死(能定死的话直接切个小体形就行了)

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

1. .script { 
2.  
3. 　width: 0; 
4.  
5. 　height: 0; //操控宽高为0，用border宽度撑出一个三角形 
6.  
7. 　border-right: 10px solid transparent; 
8.  
9. 　border-top: 15px solid #c59c53; 
10.  
11. 　} 

　　我看到的榜首种写法是把三角形直接拼在前边的案牍后边，当然这在iphone上是没有问题的。但在部分安卓机型上却会有1像素的空隙，就像这样：

　　

我现在感受到安卓阵营深深的歹意

 

　　原因或许是定位在各安卓手机上会有不同的作用。。如同咱们都是山公，长的却都纷歧样。

　　对此有个好的处理计划：

　　跟团游　

1. <p class="rongqi"> 
2.     <span class="wenan">跟团游</span> 
3.     <span class="script"></span> 
4. </p> 

1. .rongqi {//容器 
2.  
3. 　height: 15px; 
4.  
5. 　overflow: hidden;//设置超出躲藏 
6.  
7. 　position: absolute; 
8.  
9. 　top: 0; 
10.  
11. 　left: 0; 
12.  
13. 　} 
14.  
15. 　.wenan{//案牍 
16.  
17. 　float: left; 
18.  
19. 　position: relative; //设置相对定位 
20.  
21. 　z-index: 3; //设置层级不被三角形挡住 
22.  
23. 　height: 15px; 
24.  
25. 　padding-left: 4px; 
26.  
27. 　line-height: 16px; 
28.  
29. 　color: #fff; 
30.  
31. 　font-size: 10px; 
32.  
33. 　} 
34.  
35. 　.script { 
36.  
37. 　width: 0; 
38.  
39. 　height: 0; 
40.  
41. 　border-right: 20px solid transparent; 
42.  
43. 　border-top: 30px solid #c59c53; //这儿的30px实际上远远超出容器的高度 
44.  
45. 　float: right; //便是为了高度超出被挡住做出梯形的作用，兼容各种机型 
46.  
47. 　margin-left: -9px; 
48.  
49. 　} 

1. <p class="rongqi"> 
2.     <span class="wenan">跟团游</span> 
3.     <span class="script"></span> 
4. </p> 

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

　　

 

　　四、图文标题

　　

 

　　一些常见的布局例如图+案牍的，有多种办法能够去写，比方padding-left+background或许position+padding-left或许before伪元素。

　　前两种办法都能够把图片做到肯定的笔直居中，可是它们都是相对整行的容器进行定位的，由于line-height兼容问题的坑，图片实际上纷歧定会和文字对齐。假如有图文对齐的需求的话，个人主张才用before伪元从来布局，before能够相对案牍来定位。

1. p{ 
2.  
3. height:44px; 
4.  
5. line-height:45px; 
6.  
7. padding-left:40px; 
8.  
9. } 
10.  
11. p::before{ 
12.  
13. content: ''; 
14.  
15. display: inline-block; 
16.  
17. background: url("../img/xxx.png") center center no-repeat; 
18.  
19. background-size: contain; //这儿把布景图片尺寸设置成contain，不需求考虑图片拉伸的问题 
20.  
21. width: 14px; 
22.  
23. height: 18px; 
24.  
25. margin: 0 5px -4px 0; 
26.  
27. } 

　　还有一种状况，咱们的图文布局，是从数组中遍历出来的，相似下图：

　　

 

　　这种状况更适合position去写，所以写款式必定要根据不同状况去挑选适宜的办法。

　　五、左右宽度自适应

　　第四个小技巧完毕，图中的布局实际上是分左右两块的，按照ui的需求，案牍是要左对齐，数字是要右对齐的。你或许最早想到的是把右侧的数字定位或许起浮到那，左面的容器加上个margin-right或许padding-right。这样能够完结，可是两边的案牍有极点状况呈现。

　　作用或许是这样的：

　　

 

　　也或许是这样的

　　由于你底子不知道两边案牍的长度究竟是多少。

　　我的计划是用box布局，左面的容器设置box-flex:1，右侧不论它：

主题门票

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

1. .ent-li { 
2.  
3. 　margin-left: 45px; 
4.  
5. 　height: 44px; 
6.  
7. 　display: -webkit-box; //box布局并做好兼容 
8.  
9. 　display: box; 
10.  
11. 　position: relative; 
12.  
13. 　} 
14.  
15. 　.ent-li .left { 
16.  
17. 　-webkit-box-flex: 1; //box-flex:1操控宽度自适应 
18.  
19. 　box-flex: 1; 
20.  
21. 　text-align: left; 
22.  
23. 　line-height: 45px; 
24.  
25. 　font-size: 16px; 
26.  
27. 　color: #333; 
28.  
29. 　overflow: hidden; 
30.  
31. 　text-overflow: ellipsis; 
32.  
33. 　white-space: nowrap; 
34.  
35. 　} 
36.  
37. 　.ent-li .right { //右侧啥都不必管 
38.  
39. 　text-align: right; 
40.  
41. 　line-height: 45px; 
42.  
43. 　font-size: 12px; 
44.  
45. 　color: #999; 
46.  
47. 　padding-left: 10px; 
48.  
49. 　} 

　　让咱们看看终究极点条件下的显现作用：

　　

 

　　或许：

　　

 

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

　　六、display:inline-block

　　众所周知，元素有3种根本显现框类型，block块级，inline-block行内块级，inline行内。

　　inline-block是一种特别存在，能够设置宽高也能够使元素在一行摆放。

　　我在开发中会遇到以下两种布局：

　　

 

　　

 

　　这两种布局都能够用float:left来写，可是起浮完了还需求清楚起浮。所以能够直接把元素设置成inline-block相同能够主动摆放

1. .rongqi{//每块容器 
2.  
3. 　display: inline-block;//设置行内块级 
4.  
5. 　width: 25%; //设置宽度为1/4 
6.  
7. 　font-size: 12px; 
8.  
9. 　text-align: center; 
10.  
11. 　} 

　　这儿会有个小坑，便是行内元素在水平缓笔直摆放的时分会有距离。形成这种成果

　　

 

　　左面是默许状况下的作用，右侧是改善后的作用，左面第二行和榜首行中心有段莫名的距离，这并不是咱们实在想要的。

　　处理的办法很简单：

　　.father{

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

　　}

　　七、模仿翻滚

　　

 

　　模仿翻滚也是在项目中遇到的常见布局。布局要求弹层出来后，弹层中的内容能够翻滚，弹层背面的列表不能随弹层翻滚而翻滚。而且在弹层上滑动的时分，整个页面也不能随之翻滚。

　　直接上代码：

1. <section class="father"> 
2.     <section class="content-body"> 
3.     <!--页面内容、蒙层、蒙层中的内容互为兄弟节点，避免点击时页面穿透--> 
4.     </section> 
5.     <section class="layout"> 
6.     <!--页面内容、蒙层、蒙层中的内容互为兄弟节点，避免点击时页面穿透--> 
7.     </section> 
8.     <section class="layout-body"> 
9.     <!--页面内容、蒙层、蒙层中的内容互为兄弟节点，避免点击时页面穿透--> 
10.     </section> 
11. </section> 

1. .father{ 
2.  
3. 　height: 533px; 
4.  
5. 　overflow-y: scroll;//页面高度设置为屏幕高度，正常状况下超出翻滚 
6.  
7. 　} 
8.  
9. 　.content-body{ 
10.  
11. 　height: 533px; 
12.  
13. 　overflow-y: scroll;//内容高度设置为屏幕高度，正常状况下超出翻滚 
14.  
15. 　} 
16.  
17. 　.layout{ 
18.  
19. 　height: 100%; 
20.  
21. 　width: 100%; 
22.  
23. 　position: fixed; 
24.  
25. 　left: 0; 
26.  
27. 　right: 0; 
28.  
29. 　top: 0; 
30.  
31. 　bottom: 0; 
32.  
33. 　background: rgba(0, 0, 0, 0.7); 
34.  
35. 　overflow: hidden; 
36.  
37. 　z-index: 1000000; 
38.  
39. 　} 
40.  
41. 　.layout-body{ 
42.  
43. 　height: 46%; 
44.  
45. 　width: 100%; 
46.  
47. 　position: fixed; 
48.  
49. 　left: 0; 
50.  
51. 　right: 0; 
52.  
53. 　bottom: 0; 
54.  
55. 　background: rgba(0, 0, 0, 0.7); 
56.  
57. 　overflow: hidden; 
58.  
59. 　z-index: 1000001; 
60.  
61. 　} 
62.  
63. 　当咱们触发蒙层弹出时操控款式 
64.  
65. 　.father{ 
66.  
67. 　height: 533px; 
68.  
69. 　overflow-y: hidden;//设置超出躲藏，那么页面不会触发翻滚 
70.  
71. 　} 
72.  
73. 　.content-body{ 
74.  
75. 　height: 533px; 
76.  
77. 　overflow-y: hidden;//设置超出躲藏，那么页面不会触发翻滚 
78.  
79. 　} 

　　这个办法尽管完结了页面模仿翻滚的作用，可是当蒙层弹出的时分设置了overflow:hidden会导致页面scrollTop变成0，页面相当于被滚到顶部了。假如UI或许PM不愿意，请与他们撕逼。