移动端款式小技巧

导语   平常在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview款式显现作用纷歧致形成的。以下总结了一些常见坑和一些小技巧,期望对看官有所协助!  本文只针对两大手机阵营 Android和IOS 中的
  平常在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机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-size14px
  6.  
  7.  line-height18px
  8.  
  9.  overflowhidden; //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.  width0
  4.  
  5.  height0; //操控宽高为0,用border宽度撑出一个三角形 
  6.  
  7.  border-right10px solid transparent
  8.  
  9.  border-top15px 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.  height15px
  4.  
  5.  overflowhidden;//设置超出躲藏 
  6.  
  7.  positionabsolute
  8.  
  9.  top: 0
  10.  
  11.  left: 0
  12.  
  13.  } 
  14.  
  15.  .wenan{//案牍 
  16.  
  17.  floatleft
  18.  
  19.  positionrelative; //设置相对定位 
  20.  
  21.  z-index3; //设置层级不被三角形挡住 
  22.  
  23.  height15px
  24.  
  25.  padding-left4px
  26.  
  27.  line-height16px
  28.  
  29.  color#fff
  30.  
  31.  font-size10px
  32.  
  33.  } 
  34.  
  35.  .script { 
  36.  
  37.  width0
  38.  
  39.  height0
  40.  
  41.  border-right20px solid transparent
  42.  
  43.  border-top30px solid #c59c53; //这儿的30px实际上远远超出容器的高度 
  44.  
  45.  floatright; //便是为了高度超出被挡住做出梯形的作用,兼容各种机型 
  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. p::before{ 
  11.  
  12. content''
  13.  
  14. display: inline-block
  15.  
  16. backgroundurl("../img/xxx.png"center center no-repeat
  17.  
  18. background-size: contain; //这儿把布景图片尺寸设置成contain,不需求考虑图片拉伸的问题 
  19.  
  20. width14px
  21.  
  22. height18px
  23.  
  24. margin0 5px -4px 0
  25.  

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

  

\

 

  这种状况更适合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-left45px
  4.  
  5.  height44px
  6.  
  7.  display: -webkit-box; //box布局并做好兼容 
  8.  
  9.  display: box; 
  10.  
  11.  positionrelative
  12.  
  13.  } 
  14.  
  15.  .ent-li .left { 
  16.  
  17.  -webkit-box-flex: 1; //box-flex:1操控宽度自适应 
  18.  
  19.  box-flex: 1
  20.  
  21.  text-alignleft
  22.  
  23.  line-height45px
  24.  
  25.  font-size16px
  26.  
  27.  color#333
  28.  
  29.  overflowhidden
  30.  
  31.  text-overflow: ellipsis; 
  32.  
  33.  white-spacenowrap
  34.  
  35.  } 
  36.  
  37.  .ent-li .right { //右侧啥都不必管 
  38.  
  39.  text-alignright
  40.  
  41.  line-height45px
  42.  
  43.  font-size12px
  44.  
  45.  color#999
  46.  
  47.  padding-left10px
  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不愿意,请与他们撕逼。

http://www.nucmc.com/ true 移动端款式小技巧 http://www.nucmc.com/show-24-853-1.html report 16180.5   平常在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview款式显现作用纷歧致形成的。以下总结了一些常见坑和一些小技巧,期望对看官有所协助!  本文只针对两大手机阵营 Android和IOS 中的
TAG:移动端 技巧
本站欢迎任何方式的转载,但请有必要注明出处,尊重别人劳动成果
转载请注明: 文章转载自:BETWAY官网网 http://www.nucmc.com/show-24-853-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)