响应式布局小结

响应式布局

媒体查询
========
@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代表否