响应式布局 媒体查询 media query的用法

产生响应布局是因为设备的不同，最终还是分辨率，设备显示器大小不同导致的，所以在做开发时要先了解开发对象的屏幕尺寸信息，可以参考这个网站：响应式开发设备屏幕分辨率查询网址

为了解决移动端屏幕分辨率的问题，各大浏览器专门定义并支持viewport虚拟窗口，他的作用就是允许开发者创建一个虚拟窗口，并且可以自定义其窗口大小或缩放比例，你只需要在网页的头部加入如下meta：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

html5模块了：Media Query使用语法：@media [only|not] media_type and media_feature

media_type ：

all —— 所有设备

braille —— 盲文

embossed —— 盲文打印

handheld —— 手持设备

print —— 文档打印或打印预览模式

projection —— 项目演示，比如幻灯

screen —— 彩色电脑屏幕

speech —— 演讲

tty —— 固定字母间距的网格的媒体，比如电传打字机

tv —— 电视

[b]media_feature > 值> Min/Max >描述:[/b]

color > 整数 > yes > 每种色彩的字节数

color-index > 整数 > yes > 色彩表中的色彩数

device-aspect-ratio > 整数/整数 > yes > 宽高比例

device-height > length > yes > 设备屏幕的输出高度

device-width > length > yes > 设备屏幕的输出宽度

grid > 整数 > no > 是否是基于格栅的设备

height > length > yes > 渲染界面的高度

monochrome > 整数 > yes > 单色帧缓冲器中每像素字节

resolution > 分辨率(“dpi/dpcm”) > yes > 分辨率

scan > Progressive interlaced > no >tv媒体类型的扫描方式

width > length > yes > 渲染界面的宽度

orientation > Portrait/landscape >no > 横屏或竖屏

media_feature > 值 > Min/Max > 描述

color > 整数 > yes > 每种色彩的字节数

color-index > 整数 > yes > 色彩表中的色彩数

device-aspect-ratio> 整数/整数 > yes > 宽高比例

device-height > length > yes > 设备屏幕的输出高度

device-width > length > yes > 设备屏幕的输出宽度

grid > 整数 > no > 是否是基于格栅的设备

height > length > yes> 渲染界面的高度

monochrome > 整数 > yes > 单色帧缓冲器中每像素字节

resolution > 分辨率(“dpi/dpcm”) > yes > 分辨率

scan > Progressive interlaced >no > tv媒体类型的扫描方式

width > length > yes > 渲染界面的宽度

orientation > Portrait/landscape > no > 横屏或竖屏

用法：

//1、
@media screen and (max-width:450px){
/*一些样式*/
/*意思是界面宽度小于450px时的相应样式*/
body{
background:red;
}
}

//2、
@media screen and (orientation:landscape) {
/*判断手机横向时*/
}

//3、
<link rel="stylesheets" type="css/text" media="screen and (max-width:450px)" href="max450.css" />

如果你使用的浏览器版本过低，不知此媒体查询可以用插件来弥补：

<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>