column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
关键字
and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型
媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比
window.devicePixelRatio = 物理像素 / dips
样式引入
<link rel="stylesheet" href="css/index.css" media="print" />
@import url("css/demo.css") screen;
@media screen{ }
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:360px) and (max-width:500px) {}
样式引入
<link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="indexC.css" media="screen and (max-width: 600px)">
移动设备
<meta name="viewport" content="" />
width [pixel_value | device-width(设备宽度)]
height [pixel_value | device-height(设备高度)]
user-scalable 是否允许手动缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
移动设备
<meta name="viewport" content="" />
width [pixel_value | device-width(设备宽度)]
height [pixel_value | device-height(设备高度)]
user-scalable 是否允许手动缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h14606.shtml
