移動端電商實戰類css技巧總結

前言:
最近在搭一個仿京東的移動app
移動端相比PC端的後臺管理少了很多邏輯,但是相對難的就是佈局的實現。
所以最近重心都在佈局,知識的吸收和鞏固都集中在css,sass等上面了
由下記錄我在開發過程中遇到的一些值得記錄&思考的東西:

1. css實現文本最多兩行,超過則用省略號結尾

overflow: hidden;//超出部分首先隱藏
text-overflow: ellipsis;//然後省略號補齊空位
display: -webkit-box;// 設置display,將對象作爲彈性伸縮盒子模型顯示
-webkit-line-clamp: 2;// 限制在一個塊元素顯示的文本的行數
text-overflow: -o-ellipsis-lastline;//在文本的最後一行加上省略號
-webkit-box-orient: vertical;//規定框的子元素應該被水平或垂直排列

2. 文本單行居中,多行居左

//html
<h2><p>單行居中,多行居左</p></h2>
p {
    display: inline-block;
    text-align: left;//內層居左
}

h2{
    text-align: center;//外層居中
}

參考鏈接:單行居中顯示文字,多行居左顯示,最多兩行超過用省略號結尾

3. 多列均勻佈局問題

我使用的是flexbox佈局,因爲移動端已經完全適配flex了。
借鑑了bootstrap的設計思想,把佈局的都寫成一個class然後需要的時候直接引用相應的class標籤
如實現全適應的均勻三列布局:

這裏寫圖片描述

這裏寫圖片描述

這裏寫圖片描述

關於flexbox的知識點參考:
阮一峯的網絡日誌—Flex 佈局教程:語法篇

阮一峯的網絡日誌—Flex 佈局教程:實例篇

flex - CSS | MDN

擴展鏈接:多列均勻佈局問題

4. 消失的邊界線問題

這裏寫圖片描述
我們要完成如上效果,列與列之間有個短豎線,初看很簡單直接每列加上左邊框:

<div class="div_class_Grid">
     <div class="div_class_GridCol_Col33">
       <p>154.4萬</p>
       <p>關注人數</p>
     </div>
     <div class="div_class_GridCol_Col33">
       <p>98</p>
       <p>全部商品</p>
     </div>
     <div class="div_class_GridCol_Col33">
       <p>1</p>
       <p>店鋪動態</p>
     </div>
 </div>
.div_class_GridCol_Col33{
     border-left:1px solid $bordercolor;
}

然後就有點尷尬了,
意料之外情理之中的事發生了:

這裏寫圖片描述

多了一個邊界線、

我解決的辦法是,只給中間的那塊元素加邊框。。左邊一個右邊一個

.div_class_GridCol_Col33:nth-child(2){
   border-left:1px solid $bordercolor;
   border-right:1px solid $bordercolor;
 }

這裏寫圖片描述

得虧只有三列。。如果超過三列呢。
所以我們應該直面問題,把邊界的那個去掉。。

這裏有個奇淫技巧:
思路:實現把左邊的那個邊框想辦法給移出去
實現:把每列向左移動1px, 然後父容器規定超出的就隱藏,然後get √

這裏寫圖片描述

.div_class_Grid{
  overflow: hidden;
 }
 .div_class_GridCol_Col33{
   margin-left:-1px; 
   border-left:1px solid $bordercolor;
 }

參考鏈接:7、消失的邊界線問題

備註:這位騰訊的大神寫的這個整理真心實用 ,歎爲觀止。

5. 多列布局等高的實現

比如說我們要佈一個這樣的局

這裏寫圖片描述

要在右邊的列加個border-bottom
需要面對的問題是:
左邊的高度是由圖片撐開的,隨着設備屏幕的增大縮小圖片會自適應變化。
右邊的文字部分是由文字撐開高度的。雖然文字也是rem爲單位隨着屏幕變化而變化但是變化的程度終究沒有圖片來的陡峭。
問題的直接原因以上。
如果通過解決直接原因的辦法解決:
我想的是右邊加個padding-top ,padding-bottom 的高度。然後撐開右邊的高度。
然而還是會面臨rem變化與圖片變化程度不一的問題。

而解決問題的根本路徑便是:讓左右兩列等高。

1.因爲是用到flex佈局。
所以:使用align-items:stretch屬性即可撐開
備註:爲啥沒考慮到這個屬性呢。。
因爲之前設置流式佈局的時候用align-items:flex-start
使用的是如果一行排不下就單獨起行。
現在改掉這個屬性爲stretch或者直接刪除這個屬性均可實現自動撐開。
對flex佈局就是這麼強大。。

參考鏈接:9、巧妙的多列等高佈局

6.未完待續

TODO:
1.移動端1px的問題
2.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章