紀錄一下怎麼使用 BEM, SCSS 變數, mixin, extend, iPhoneX safe area, hover 換圖, Bootstrap col 順序。
命名規則
BEM 命名規則,header__title--hover
,header 中的 title 在 hover 時的狀態,覺得這樣的命名方法提供了一個統一又易讀的原則,有原則可預測性就高,就算什麼寫法都不去背誦,也可以透過這樣的原則來理解當時的想法。
變數使用
使用定義主色調,這樣在未來需要調整主色調時速度會快很多,不用全部搜尋再取代還擔心取代錯誤。$primary-color: #ffffff;
$second-color: #000000;
@mixin @extend
@mixin
的做法是可以帶入變數,然後生成客製化樣式,譬如當同樣的一個版但需要套不同圖或是顏色,這樣的做法就會非常方便,@extend
就比較單純可以當成注入性質就好了,mixin 搭配 rwd 的寫法
1 | @mixin setSpecail($size, $color) { |
那跟 bootstrap 那種一直加上去的方法差異在哪? class=”btn btn-default btn-large”
,覺得差異在函式庫要比較彈性,所以需要多寫幾種,但如果是自己要用,像 “button” 這種可能就不用出現了 @@ 直接用 % 告訴編譯器說這個不用了,只是個注入用的變數。
iphone X safe area
因為 iphone X 把按鈕拔掉了,所以操作介面上,底部會出現一條線,滿版的螢幕上也會有瀏海, 所以蘋果定義了幾個特殊屬性讓大家設定,讓大家可以透過安全顯示範圍的值來控制上下左右是否需要留白
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
hover 換圖
如果今天有需求是需要在 hover 換圖,直覺上會想要去抽換掉 image 的 url,在 chrome 可以直接在 content 裡面進行設定,但是 firefox, edge 就會有問題,所以又需要多寫一個偽元素並加在偽元素中,這種都是暴力解的方式,其實最好的方法還是不要用 img,改用一個假的容器設定圖片高度再加上 background-image 就好了。
1 | img { |
bootstrap 手機版調整 col 順序
有時候就是會想要讓手機板的順序比較賞心悅目,這時候就可以用到內建的 pull 以及 push 來改變電腦版的位置,這樣當手機版 push 或是 pull 的效果消失時,就會是想要的手機版順序了。
1 | <div className="row"> |
字型
因為 safari 跟 chrome 的關係,所以會需要有不一樣的字形,兩種都挑了類似的之後,覺得可以就太天真了。作業系統也會影響,會 windows 的 chrome 跟 mac 的字型其實也有點差異,底下是參照網路論壇的,然後拿掉幾個不適用的,為什麼會有不適用的出現,因為考慮到中文字以及需要用的特殊字元,各位大大可以自由調換順序,看看結果如何。
1 | font-family: PingFang TC, 黑體-繁, Heiti TC, 蘋果儷中黑, Apple LiGothic Medium, 微軟正黑體, |
動畫
蠻推薦 animate.css
!!!! 也有提供 custom build 的功能。
https://daneden.github.io/animate.css/
寬度計算
box-sizing: border-box;
, width 和 height 屬性包括內容(content),內邊距(padding)和邊框(border)。
長度單位
樣式檔中,大小有絕對單位與相對單位兩種,其中只有 px
是絕對單位,另外除了行高 (line-height) 可以用純數字 (相對文字大小倍數) 外,大多都會是下面幾種
px | rem | em | % | vw | vh |
---|---|---|---|---|---|
絕對 | 相對 | 相對 | 相對 | 相對 | 相對 |
數值 | 倍數 | 倍數 | 百分比 | 百分比 | 百分比 |
root | parent | parent | 螢幕寬度 | 螢幕高度 |
此外也分享一個我自己都蠻晚才知道的冷知識:
瀏覽器預設 root 的值,等於 16px
這就是為什麼普遍網頁設計會用 8px 或是 8 的倍數當作單位的原因,接下來直接看 bootstrap4 的設定,不難看出都是用 rem 來當作基本單位,透過相對單位,我們可以透過少量的程式碼解決蠻多可能會遇到的問題。
- em 如果只想限制區域比例的問題就可以使用,譬如部落格文章顯示想要調整字體大小
- rem 在 RWD 或是各種版面大小,想整體調整就比較建議用這個
1 | h1, |
隱藏 Scroll Bar
1 | .hide-scrollbar { |
喜歡這篇文章,請幫忙拍拍手喔 🤣