响应式布局小结

响应式布局

媒体查询

========

@media screen and (-webkit-min-device-pixel-ratio: 0)

@media screen and (max-width: 767px){} 宽度小于767px时使用

@media (min-width: 768px)

@media (max-device-width: 480px) and (orientation: landscape)
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

@media all and (transform-3d), (-webkit-transform-3d)

iPads (portrait and landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */

}

iPads (landscape)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */

}

iPads (portrait)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */

}

iPhone 4

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

}

@media screen and (min-width:1024px){ }

【screen是媒体类型 】
all 默认。适用于所有设备。
aural 语音合成器。
braille 盲文反馈装置。
handheld 手持设备（小屏幕、有限的带宽）。
projection 投影机。
print 打印预览模式/打印页。
screen 计算机屏幕。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视类型设备（低分辨率、有限的滚屏能力）

【and是操作符】
and 逻辑与，连接设备名与选择条件、选择条件1与选择条件2。
not 排除某种设备
, 设备列表
only 限定某种设备类型

【min-width是属性值】
width <length>
视觉屏幕/触摸设备 接受最大最小值 定义输出设备中的页面可见区域宽

度(单位一般为px)

heigth <length>
视觉屏幕/触摸设备 接受最大最小值 定义输出设备中的页面可见区域高

度(单位一般为px)

device-width <length>
视觉屏幕/触摸设备 接受最大最小值 定义输出设备的屏幕可见宽度(单

位一般为px)

device-heigth
<length> 视觉屏幕/触摸设备 接受最大最小值 定义输出设备的屏幕可见高度(单

位一般为px)

orientation portrait |landscape
位图介质类型 不接受最大最小值 定义’height’是否大于或等

于’width’。值portrait表是，landscape代表否即设，备手持方向：portait为横向，landscape为竖向

aspect-ratio <ratio>
位图介质类型 接受最大最小值定义 ’width’与’height’的比率，即

浏览器的长

宽比
device-aspectratio <ratio>
位图介质类型 接受最大最小值 定义’device-width’与’device-

height’的比率，即设备屏幕长宽比。如常见的显示器比率：4/3， 16/9，16/10

color <integer>
视觉媒体 接受最大最小值 定义每一组输出设备的彩色原件个数。如

果不是彩色设备，则值等于0
color-index <integer>
视觉媒体 接受最大最小值 定义在输出设备的彩色查询表中的条目数。

如果没有使用彩色查询表，则值等于0
monochrome <integer>
视觉媒体 接受最大最小值 定义在一个单色框架缓冲区中每像素包含的

单色原件个数。如果不是单色设备，则值等于0
resolution <resolution>
位图介质类型 接受最大最小值 定义设备的分辨率。如：96dpi，300dpi

，

118dpcm
scan progressive| interlace
电视类 不接受最大最小值 定义电视类设备的扫描工序， progressive

逐行扫描，interlace隔行扫描
grid <integer>
栅格设备 不接受最大最小值 用来查询输出设备是否使用栅格或点阵。

只有1和0才是有效值，1代表是，0代表否