响应式页面

@media 媒体查询

@media all{
    	div{
    		background: url(img/bg-x2.jpg);
    	}
    }

• all 所有媒体
• braille 盲文触觉设备
• embossed 盲文打印机
• print 手持设备
• projection 打印预览
• screen 彩屏设备
• speech ‘听觉’类似的媒体类型
• tty 不适用像素的设备
• tv 电视

---

媒体特性

@media (min-width:600px){
	div{
		width: 400px;
		height: 400px;
		background-color: plum;
	}
}

min-width 分辨率宽度大于等于设置值的时候识别 max-width 分辨率宽度小于等于设置值的时候识别 竖屏 orientation:portrait 横屏 orientation:landscape -webkit-min-device-pixel-ratio:2设备像素密度

---

关键字

@media only all and (min-width:821px) and (max-width:1023px){
	div{
		width: 600px;
		height: 600px;
		background-color: plum;
	}
}

• and 和、与 （连接媒体特性）
• not 排除指定媒体类型
• only 指定某种特定的媒体类型
• 很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

---

显示隐藏

display: none; 隐藏后不占位置 visibility: hidden; 隐藏后占位置

---

常规尺寸

@media all and (min-width:1200px){
//大分辨率（PC分辨率、TV）
}

@media all and (min-width:850px) and (max-width:1199px){
//中等分辨率（PC小分辨率 || pad）
}

@media all and (min-width:700px) and (max-width:849px){
//pad设备
}

@media all and (min-width:480px) and (max-width:699px){
//高分辨率手机设备 || 低分辨率平板
}

@media all and (max-width:479px){
//手机设备
}

---

样式引入

• 方式一

<link rel="stylesheet" href="css/index.css" media="all and (min-width:600px) and (max-width:700px)" />

• 方式二

外联样式表 link[media="all and (min-width:600px)"] @import @import url(index.css) all and (min-width:600px)

• 方式三

@import url("media.css"); css文件引入媒体查询