[試] 重新定義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 屏寬和屏高的matrix: Display pixels Resolution (portrait)…

[Continue reading]