讀《CSS揭祕》總結一超實用的專案開發技巧

bigname22發表於2019-03-28
CSS

讀《CSS揭祕》總結一

前言：文章是看《CSS揭祕》書邊看邊總結的筆記

目錄：

  • 減少重複 1.考慮css值是依賴關係的時候，要用比例程式碼表達。 2.靈活控制 3.使用currentColor變數簡化程式碼 4.使用inherit繼承關鍵字
  • 關於響應式佈局的設計 1.響應式佈局的設計建議

---------------------------------人工分割線---------------------------------------------------

減少重複

1.考慮css值是依賴關係的時候，要用比例程式碼表達。 例如：

行高是字型的1.5倍
font-size: 20px;
line-height: 1.5;

字型是父字型的1.25倍
font-size: 125%;
line-height: 1.5

巧用em
padding: 0.3em 0.8em;
border-radios: 0.2em;
text-shasow: 0 -0.5em 0.05em #fff
複製程式碼

==Tips:== 儘量多使用比例的方式能使得你的修改，適應裝置等非常靈活、簡便

2.靈活控制

這是你設計的按鈕樣式。

.button {
    font-size: 125%;
    line-height: 1.5
    padding: 0.3em 0.8em;
    border-radios: 0.2em;
    background: blue;
}
複製程式碼

稍加改造就能變成取消按鈕、確認按鈕的樣式

.button .cancel {
    background: red;
} 
.button .ok {
    background: green;
} 
複製程式碼

==Tips:== 你可以把這個按鈕的樣式放在你的全域性css 庫中，class加上button就是一個按鈕樣式，class再加上ok就是一個確認按鈕了。

3.使用currentColor變數簡化程式碼

currentColor顧名思義是當前顏色，更準確的說是當前文字的顏色。 例如：你要設計一個按鈕，樣子是中間文字加上邊框。樣子想象一下，那麼你會希望這個邊框的顏色跟文字的顏色是一致的，這樣美美噠。

以前的實現方式 vs currentColor的實現方式：

舊：
button {
    color: blue;
    border: 1px solid blue;
}
新：
button {
    color: blue;
    border: 1px solid currentColor;
}
複製程式碼

==Tips:== 這種方式有超級都的應用場景，在你開發的時候只要想起有這個變數就一定有幫到你的地方

4.使用inherit繼承關鍵字 簡單理解就是某個屬性的值跟隨父佈局的值 例如：當你遇到

<style>
    span {
        color: green;
    }
</style>
<div class="parent" style="color:red">
    123<span class="child">456</span>
</div>
複製程式碼

此時執行的結果是（紅123）（綠456）； 如果你想那個child的顏色跟parent的保持一致怎麼辦？

style再加一個
.child {
    color: inherit;
}
複製程式碼

這樣的話就是紅123456； parent改什麼顏色child就跟著變成什麼顏色。

==Tips:== 所以當遇到父佈局跟子元素之間有聯絡的屬性可以考慮使用繼承的方式實現

關於響應式佈局的設計

在過往的開發中會大量使用媒體查詢（Media Query）去實現響應式的佈局（適應不同分別率的裝置），但媒體查詢使用的越多，你的程式碼就會變得越難以維護。本人並無這種開發經歷，簡單跳過。 這裡引入一位國外大神的語錄：

Basecamp的設計師：
結果我們發現，想讓網頁在一堆不同的裝置上合理展示，只需要在
最終產品上新增一點 CSS 媒體查詢就可以了。這件事情之所以這麼簡單，
關鍵在於我們的佈局原本就是彈性可伸縮的。因此，優化網頁在小螢幕上
的表現，其實只意味著把一些外邊距收攏到最小程度，然後把因為螢幕太
窄而無法顯示成雙列的側欄調整為單列布局而已。
複製程式碼

下面是關於響應式佈局的設計建議：

  • 儘量使用百分比來取代固定長度，實在不行就考慮與檢視相關的單位（vw,vh,vmin,vmax等）;這種值會被解析成檢視的百分比
  • 當你需要在較大解析度下得到固定寬度時，可以使用max-width而非width,因為max-width具有一定的適應性，可以兼顧到小解析度的情況
  • 為（img、Object、Video、iframe）等設定max-width:100%
  • 加入圖片要鋪滿一個容器，並且不受容器尺寸影響，可以使用background-size:cover實現，但往往從介面中拿回一張大圖然後縮成一個小圖去顯示都是很浪費的，應為浪費瀏覽，浪費對圖片的解析
  • 善於使用流式佈局；例如想展示一個橫向滾動的列表，你可以定義你每個item的寬度（假設寬度=50%),這樣的話無論是pc，還是手機最終顯示兩個；例如，你將item固定200px寬，那麼在電腦、手機顯示效果都是固定寬度的方式，電腦螢幕寬一點的話就能多顯示幾個，手機就顯示少一幾個而已。

我們的思路就是千方百計的不使用固定寬高，如此一來你的網頁能有一個不錯的自適應螢幕的能力了，再搭配媒體查詢那應該能解決更多的螢幕適應問題。

這一篇文章就到這裡；後續會更新~

相關文章