iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

我說那個手機版系列 第 25

[Day 25] RWD 的難題 Part 2

  • 分享至 

  • xImage
  •  

尺寸規則

基本常見的尺寸設定會以這些前輟字 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

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

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

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

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

當你想要整業主的時候可以(不對)。


所以說那個手機版

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


Blog 同步刊登:[12th 鐵人賽] RWD 的難題 Part 2, Day 25


上一篇
[Day 24] RWD 的難題 Part 1
下一篇
[Day 26] RWD 的難題 Part 3
系列文
我說那個手機版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言