Media Queries

响应式设计中最关键的一部分就是 Media Queries。整理下常用的 Media Queries,后期将持续维护。

首先,先列下最常见的几款设备参数:

设备 分辨率 像素比 (CSS pixel ratio) 宽高比 (Aspect ratio)
iPhone 3 480×320 1 3:2
iPhone 4 & 4S 960×640 2 3:2
iPhone 5 1136×640 2 71:40
iPad mini 1024x768 1 4:3
iPad 1 & 2 & 3 1024×768 1 4:3
iPad 4 2048×1536 2 4:3
Samsung Galaxy S I & II 800x480 1.5 3.5
Samsung Galaxy S III 1280x720 2 16:9

详细信息可以访问维基百科,维基百科上 iPad 3 和 iPad 4 参数相同,个人感觉有误。

此外,Android 设备过多,本人也了解较少,以下按 dpi 为维度进行区分:

DPI 分辨率 像素比 (CSS pixel ratio)
xhdpi 960x640 2
hdpi 800x480 1.5
mdpi 480x320 1
ldpi 320x240 0.75

大概的占比可参考移动终端开发必备知识

回归正题,根据上面的参数可以设置断点,列出常用的 Media Queries:

/* Smartphones */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {

}

/* device pixel ratio 可以根据不同的像素比加载不同质量的图片 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

}

@media only screen and (-webkit-min-device-pixel-ratio : 1),
only screen and (min-device-pixel-ratio: 1) {

}


/* iPads */
@media only screen and (device-width: 768px){

}
/* iPads (landscape) */
@media only screen
and (device-width: 768px)
and (orientation: landscape) {

}
/* iPads (portrait) */
@media only screen
and (device-width: 768px)
and (orientation: portrait) {

}

/* iPhone 4 */
@media only screen 
and (device-width: 320px) 
and (-webkit-device-pixel-ratio: 2){

}

/* iPhone 4 (Landscape) */
@media only screen 
and (device-width: 320px) 
and (-webkit-device-pixel-ratio: 2)
and (orientation : Landscape) {

}

/* iPhone 4 (Portrait) */
@media only screen 
and (device-width: 320px) 
and (-webkit-device-pixel-ratio: 2)
and (orientation : portrait) {

}

/* iPhone 5 */
@media only screen and (device-aspect-ratio: 40/71) {

}

iPad 和 iPhone 发生翻转的时候,设备的宽度不会发生变化,因此不能通过 device-width 判断设备的方向,而是通过 orientation 判断的。

当然以上不是最全的,可以根据各自的需求组合出各种写法,欢迎继续补充(^__^)

参考阅读

Flexible Box Layout Module

困惑

刚开始使用 Flexbox 布局,或许会有不少困惑。Google 一下,会发现即有 display: box; 也有 display: flex;,属性也是有 box-{*}flex-{*} 两套。

到底是 box 还是 flex 呢?终其原因,Flexbox 还未正式发布,从 2009 年到目前已经经历了多个版本,其中命名发生了较大的变化。

引用 Dive into Flexbox

Flexbox Specification Timeline:

  • July 2009 Working Draft (display: box;)
  • March 2011 Working Draft (display: flexbox;)
  • November 2011 Working Draft (display: flexbox;)
  • March 2012 Working Draft (display: flexbox;)
  • June 2012 Working Draft (display: flex;)
  • September 2012 Candidate Recommendation (display: flex;)

虽然最新一版已经到达 CR 版本,但很多浏览器并不支持,目前支持比较广泛的是 2009 年的版本,具体的兼容情况可参考 caniuse

新老对比

2009年版和2012年版的做个对比:

2009版 2012版 说明
display: box display: flex flexbox 布局
box-lines flex-wrap flex items 是否换行
box-orient flex-direction flex items 的排列方向
box-pack justify-content / align-self 水平方向的剩余空间分配
box-align justify-content / align-self 竖直方向的剩余空间分配
box-direction order flex items 的排列序列
box-flex flex flex item 的大小

说明: box-pack 和 box-align 都对应 justify-content / align-self。因为 justify-content / align-self 和水平、竖直没有直接关系,主要和 main axis 、cross axis 有关,而排列的方向不同,main axis 和 cross axis也会发生变化,可以引用个图说明一下:

css-flexbox_axis

图出自flexbox-basics

个人认为,新 Flexbox 除了命名的变化,在操作单位更加细化,例如:order, align-self, flex-basis, flex-grow, flex-shrink 定义的对象都是 flex item ,这样能产生更多的变化。

Demo

Old Flexbox

New Flexbox (New Flexbox 支持版本有限,该Demo仅支持Chrome,请在Chrome下运行)

PS:Demo 较简略,可自动动手多多尝试。

参考阅读

© 2013 Applezqp. Powered by Jekyll