响应式设计是在不同设备下分辨率不同显示的样式就不同。
media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。
语法： @media mediatype and | not | only (media feature) {}
示例：
max-width: 600px)" href="small.css"/>
结果： 分辨率在大到600的时候 显示这个样式表里面的样式。
媒体类型：
all 用于所有设备
print 用于打印机和打印设备
screen 用于电脑屏幕，平板电脑，智能手机。
立即学习“前端免费学习笔记（深入）”；
speech 用于阅读器等发声设备
关键字：
cqcms通用企业建站介绍 苍穹企业网站管理系统(CQCMS)软件是国产PHP网站内容管理系统：CQcms内容管理系统 ，它将成为您轻松建站的利器。模板全部使用文件形式保存，对用户设计模板、网站升级转移均提供很大的便利，健壮的模板标签为站长DIY自己的网站提供了强有力的支持。MVC框架，自定义标签，模板文件修改非常方便，PC+WAP响应式布局，一个域名，自动识别终端，一个后台同时管理PC和wap。
and 运算符用于符号两边规则均满足条件则匹配。
@media screen and (max-width : 600px) {
/*匹配宽度小于600px的电脑屏幕*/
}
not关键字是用来排除某种制度的媒体类型。
@media not print {
/*匹配除了打印机以外的所有设备*/
}
only 用来定某种特定的媒体类型。
@media only screen and (min-width:300) and (max-width:500){
/*这段是只(only)针对彩色屏幕设备*/
}
媒体特性： （常用的）
max-width(max-height): 最大宽度和最大高度
@media (max-width: 600px) {
匹配界面宽度小于600px的设备
}
min-width(min-height) : 最小宽度和高度
@media (min-width : 400px) {
匹配界面宽度大于400px的设备
}
max-device-width(max-device-height) 设备的最大宽度和高度
@media (max-device-width: 800px) {
匹配设备(不是界面)宽度小于800px的设备
}
min-device-width(min-device-height): 设备的最大宽度和高度
@media (min-device-width: 600px) {
匹配设备(不是界面)宽度大于600px的设备
}
orientation: portrait 竖屏
href="indexa.css"/>
结果: 在竖屏下显示这样式
orientation:landscape 横屏
href="indexa.css"/>
结果: 在横屏下显示这样式
