响应式布局 媒体查询 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 —— 电视

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 > 横屏或竖屏

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>