css样式表
css样式表，不只有浏览器
单词 media 媒体
? screen 屏幕
? device 设备
? mobile 移动
? orientation 方向
? guarantee 保证
media属性
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
media属性值
screen 计算机屏幕(默认)
tv 电视剧类型设备(分辨率低、有限的滚屏能力)
porojection 放映机
handheld 手持设备
print 打印预览模式/打印页面
braille 盲人合成器
all 适用于所有设备
举例
使用css样式表，创建一个screen设备类型，这个查询是指定了有屏幕的设备而不是其他设备所以是screen，在创建一个“媒体查询”来指定设备类型，媒体查询要与设备匹配，所以是有屏幕宽度不能超过480像素。
<link href="loung-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
这样也可以匹配一个打印机,媒体类型为print时才会使用，这说明要通过打印机查看页面。
<link href="loung-mobile.css" rel="stylesheet" media="print">
查询中还有其他属性可以使用
尺寸
min-device-width
max-device-width
orientation 方向
landscape 横向
portrait 竖屏
直接在css中增加媒体查询
要为css指定有特定属性的设备，还有一种方法，不是在link标签中使用媒体查询，还可以直接写在css中，下面给出一个例子：
根据下面可以理解为
min 大于等于后面数值
max 小于等于后面数值
/*使用media 媒体查询
对于与这个查询匹配的设备，将所有适用的规则放在大括号里面，所以如果设备大于等于480px就会使用下面的规则*/
@media screen and (min-device-width:481px){
/*未达到屏幕尺寸480px就会让guarantee使用margin透明外边距向右移动250px*/
#guarantee{
margin-right:250px;
}
}
/*如果设备屏幕小于等于480px则会使用下面的规则*/
@media screen and (max-device-width:480px){
#guarantee{
margin-right:30ox;
}
}
/*如果打印机预览这个页面，就会使用这些规则*/
@media print{
body{
font-family:times,"times new roman",serif;
}
}
/*所有其他规则应用于所有页面，因为他们并没有包含在一个@media里面*/
p.specials{
color:red;
}
测试
通过下面的设备规格，设计一组媒体查询指定下面各个设备。
智能手机 480*640像素
<link rel="stylesheet" href="lounge-smartphone.css" media="screen and (max-device-width:479px)">
平板电脑 1024*768像素
<link rel="stylesheet" href="lounge-tablet-portrait.css" media="screen and (min-device-width:1024px) and (orientation:portrait)">
<link rel="stylesheet" href="lounge-tablet-landscape.css" media="screen and (min-device-width:1024px) and (orientation:landscape)">
桌面电脑 1280*960像素
<link rel="stylesheet" href="lounge-pc.css" media="screen and (max-device-width:1280px)">
互联网电视2650*1600像素
<link rel="stylesheet" href="lounge-tv.css" media="screen and (max-device-width:2650px)">