css編碼技巧

2021-10-01 06:41:16 字數 689 閱讀 9725

一、儘量減少**重複

二、使用一些技巧再通過少許的**查詢實現響應式。

這些技巧包括:

(1)使用百分比來代替固定寬度。如果實在做不到這一點可以使用與視口相關的單位(vw,vh,vmin,vmax)。

(2)當需要在較大解析度下得到固定的寬度時,使用max-width而不是width,因為它可以適應較小的解析度而無需使用**查詢。

(3)不要忘記為替換元素(如img、object、video、iframe等)設定乙個max-width,值為100%

(4)假如背景需要完整地鋪滿乙個容器,不管尺寸如何變化。可以考慮使用background-size:cover

(5)當頁面有行列式布局,可以使用display:flex或display:inline-block。這樣當將螢幕寬度較小的時候,列數會自動減少

(6)當時使用多列文字時,指定列寬而不是指定列數,這樣就可以在較小地螢幕上自動顯示單列布局。

三、合理地使用簡寫

四、不要濫用預處理器(less、scss等)。建議小專案直接用原生,專案較大並且css很能維持dry的情況下選擇使用預處理器。

五、相信你的眼睛,而不是數字。有時候精確的大小尺寸計算給人視覺帶來的效果還是有偏差的。

CSS編碼技巧

本文將從dry currentcolor inherit和合理使用簡寫這幾方面來詳細介紹css編碼技巧 dry,即don t repeat yourself,儘量減少 重複 在軟體開發中,保持 的dry和可維護性是最大的挑戰之一,而這句話對css也是適用的。在實踐中,可維護性的最大要素是儘量減少改動...

css 揭秘 CSS編碼技巧

喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時,應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中,而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...

css 揭秘 CSS編碼技巧

喜歡的給我乙個星吧 儘量減少改動時需要編輯的地方 當某些值相互依賴時,應該把它們的相互關係用 表示出來 易維護 vs 量少 currentcolor css有史以來第乙個變數 inherit可以用在任何css屬性中,而且它總是繫結到父元素的計算值 每個 查詢都會增加成本 查詢的端點不應該由具體裝置來...