[試] 重新定義Foundation 5 framework的media query breakpoint

相比常見的Twitter Bootstrap,另一個比較不普及HTML framework──Foundation 5更較為適合作為手機應用 Mobile app 的UI介面,不論是用HTML+CSS+Javascript再用Phonegap之類製作的App、還是用UIwebView作UI的原生App。

不過,當Foundation 用在mobile 上製作responsive的app時,我對Foundation 5的breakpoint就不特別滿意,尤其是iPhone 6和6 plus出現後,當要處理iphone 6/6+ landscape和iPad portrait 的同時,那個不論不類的”medium”,也就是641 pixels 至 768 pixels的那個屏寬breakpoint就令我超不爽。

這是Foundation 5的預設breakpoints:

最小寬度 Min-width (em) 最大寬度 Max-width (em)
small 40
medium 40.063 64
large 64.063 90
xlarge 90.063 120
xxlarge 120.063

當然,這只是我的個人意見啦。

解決不爽的方法,是自行定義各mobile view的breakpoint。

首先,先要了解各iPhone的screen display pixels,我從Kyle J Larson的這篇blog文找到了下面的一幅參考圖:

iphone-6-screen-size

這是整理後各iPhone 屏寬和屏高的matrix:

Display pixels Resolution (portrait)
屏寬
screen width
屏高
screen height
寬度
width
高度
height
iPhone 4/4S 320 480 640 960
iPhone 5/5S/5C 320 568 640 1136
iPhone 6 375 667 750 1334
iPhone 6 plus 414 736 1080 1920

採用Retina display高解析度屏幕的iPad,display pixel是768 x 1024 (直)。

於是,我就把新的breakpoint range重新設定如下:

最小寬度
Min-width (px)
最大寬度
Max-width (px)
最小寬度
Min-width (em)
最大寬度
Max-width (em)
small 479 29.9375
medium 480 767 30 47.9375
large 768 1023 48 63.9375
xlarge 1024 1919 64 119.9375
xxlarge 1920 120 0

真的可行嘛?

不知道,我也只是在試,您看不到我在標題寫有「試」嘛麼?嘿嘿