所谓的响应式网站，也就是让网页的宽度在所有的设备上都能完美的呈现给用户观看及浏览，媒体呢也就是指的这些设备，常见的媒体有电脑、手机、平板、电视、打印机、投影仪等，电脑手机及平板称之为一类（screen），电视（tv），打印机（print），投影仪（projection）
下面就是我手机的一些最常见的媒体查询
//写在head标签里面，width=device-width表示网页宽度等于设备的宽度，initial-scale=1.0表示网页的初始宽度是一倍也就是100%，user-scalable=no表示用户是否可以缩放网页的比例，minimum-scale=1.0, maximum-scale=5.0这两个代表网页缩放的最小值和最大值
//最大宽度为480，也就是当宽度小于480的时候加载此样式表
//最小宽度为480，也就是当宽度大于480的时候加载此样式表
//这次加载的样式表只能应用与打印机，后面规定了媒体类型的
@media(orientation:portrait){
//如果是垂直方向，这里的样式将生效
}
@media(max-device-width:480px){
//判断用户分辨率最大是不是480，也就是当分辨率小于等480的时候这里面的属性就生效
}
@media(max-device-width:480px){
//判断用户分辨率最小是不是480，也就是当分辨率大于等480的时候这里面的属性就生效
}
//媒体查询用户可视窗口比例
@media(aspect-ratio:3/2){
//如果是3：2这里的样式就生效
//也可以设置大于或小于
//max-aspect-ratio:3/2
//min-aspect-ratio:3/2
}
//媒体查询用户屏幕的比例
@media(device-aspect-ratio:3/2){
//这个是查询用户屏幕的比例，上面是查询用户可视窗口的比例，用法同上，也支持max和min
}
//判断用户设备是垂直方向还是水平方向
@media(orientation:portrait){
//如果是垂直方向
}
@media(orientation:landscape){
//如果是水平方向
}
//查询用户的可视高度 和 设备的总体高度：height && device-height
@media(height:480px){
//如果可视高度是480的时候就生效
也支持max 和 min
}
@media(device-height:480px){
//如果用户的设备高度是480的时候就生效
也支持max 和 min
}
//查询用户的可视宽度 和 设备的总体宽度：width && device-width
@media(width:480px){
//如果可视宽度是480的时候就生效
也支持max 和 min
}
@media(device-width:480px){
//如果用户的设备宽度是480的时候就生效
也支持max 和 min
}
//查询用户设置及像素密度
@media screen and (max-resolution:150dpi){
//当设置是电脑手机等 同时 密度小于或等于150dpi的时候生效此样式
同样支持min 查询
}
//操作符 and 同时满足
@media screen and (max-width:480px){
//用户设备必须的电脑手机平板等 同时 可视窗口必须小于或等于480才生效
}
@media screen and (min-width:480px) and (max-width:700px){
//用户设备必须的电脑手机平板等 同时 可视窗口必须大于等于480 同时 小于700才生效
}
//操作符 ， 逗号 就是或的意思
案例同上
//操作符 not 否的意思
案例同时
@media not screen{
//如果用户设备不是电脑手机平板等就生效
}
