<noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

    <noframes id="5hjpd">

    <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
      <noframes id="5hjpd">
      <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
      <del id="5hjpd"><big id="5hjpd"></big></del>
      <track id="5hjpd"></track>

      移動端樣式小技巧

      導語   平時在移動端開發拼頁面的過程中總會遇到一些問題,主要是各手機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.randomwithlife.com/ true 移動端樣式小技巧 http://www.randomwithlife.com/show-24-853-1.html report <?php echo strlen($content) / 2; ?>   平時在移動端開發拼頁面的過程中總會遇到一些問題,主要是各手機webview樣式顯示效果不一致造成的。以下總結了一些常見坑和一些小技巧,希望對看官有所幫助!  本文只針對兩大手機陣營 Android和IOS 中的
      TAG:移動端 技巧
      本站歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動成果
      轉載請注明: 文章轉載自:愛思資源網 http://www.randomwithlife.com/show-24-853-1.html

      [前端插件推薦] Plugin

      1 2 3 4
      • jQuery實現逐字逐句顯示插件l-by-l.min.js
      • jQuery帶方向感知的鼠標滑過圖片邊框特效插件
      • jQuery HotKeys監聽鍵盤按下事件keydown插件
      • 響應式無限輪播jQuery旋轉木馬插件
      響應式無限輪播jQuery旋轉木馬插件
      web前端開發
      愛思資源網 Copyright 2012-2014 www.randomwithlife.com All rights reserved.(晉ICP備13001436號-1)
      欧美精品久久久久久久自慰

      <noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

        <noframes id="5hjpd">

        <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
          <noframes id="5hjpd">
          <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
          <del id="5hjpd"><big id="5hjpd"></big></del>
          <track id="5hjpd"></track>