[12th 鐵人賽] RWD 的難題 Part 2, Day 25

尺寸規則

基本常見的尺寸設定會以這些前輟字 max-* 或 min-* 開頭，這個之前就提到過了，

• min-* 屬性值大於等於。
• max-* 屬性值小於等於。

可以使用這些前輟字的有，

• width 寬度。
• height 高度。
• aspect-ratio 寬度與高度比，輸入方式是 4/3。
• resolution 解析度。

當然，以上也可以不使用前輟字，他就會變成是絕對相符的設定，相對比較少人會這樣使用，舉例來說，

@media (width: 360px) {
    /* 寬度一定要 360px 才會生效 */
}

至於單位的部分，寬度與高度的部分就沒什麼問題，至於比例設定就是 <寬度/高度> 的比例。解析度的單位有三種可用單位，

• dpi Dots per inch.
• dpcm Dots per centimeter.
• dppx Dots per px units.

所以我們會常見到的，針對行動裝置的設定會類似 3dppx，就是 iPhoneX 上面的 375 points，然後 3dppx 就會變成 1152px 這樣的尺寸。所以說，當你設定 3dppx 的時候，在 iPhoneX 上就會生效。

至於那個直接出 1152px 給你當手機版的。

皮諾可，這個直接電死！

其他規則

比較不常見，可能也不常用的關鍵字，

• not 否定條件使用。
• and 接續條件使用。
• only 限制單一條件使用。
• pointer 裝置的游標（指向）設備。
• any-pointer 跟上面的 pointer 一樣，但範圍更大。
• hover 裝置是否允許 hover 屬性。
• any-hover 跟上面 hover 一樣，但範圍更大。

其中 pointer, any-pointer 目前分三種設定方式：

• <pointer|any-pointer>:none
• <pointer|any-pointer>:coarse
• <pointer|any-pointer>:fine

差別只在於 coarse 跟 fine 對於定義上的裝置不太一樣，另外 any-pointer 若設定為 none，在傳統的電腦設備上，基本上會被無視，因為 鍵盤 跟 滑鼠 基本上都屬於廣泛定義的游標（指向）設備。

另外有一個設定，雖然他是在 Level 5 才被加入，不過目前支援度也不錯，

• prefers-reduced-motion 減少動態效果。

他可以接受 no-preference 與 reduce 兩種數值。而後者就是移除動態效果，所以說，我還是不要說太多好了。

當你想要整業主的時候可以（不對）。

所以說那個手機版

今天先在花蓮發一下文，等等回到台北應該過半夜了 XD