Question

媒体类型

• *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)">