响应式布局与媒体查询.docVIP

响应式布局 1什么是响应式布局？ 响应式布局是一种web页面的布局方式而已。 响应式布局他是一种能够实现页面的布局跟随浏览器或者设备等因素变化而导致布局改变的一种布局方式。 响应式布局的特征 能够跟随设备发生变化 能够跟随相似设备的不同属性变化 媒体查询 媒体查询是CSS3支持的一种新的语法，在CSS2中已经对媒体查询有了部分支持。 媒体类型： 在CSS2中已经存在了媒体类型。 CSS3中支持那些媒体类型 Media Types媒体类型CSS Version版本 Compatibility兼容性 Description简介 all CSS2 所有浏览器 用于所有媒体设备类型 aural CSS2 Opera 用于语音和音乐合成器 braille CSS2 Opera 用于触觉反馈设备 handheld CSS2 Chrome,Safari,Opera 用于小型或手持设备 print CSS2 所有浏览器 用于打印机 projection CSS2 Opera 用于投影图像，如幻灯片 screen CSS2 所有浏览器 用于计算机显示器 tty CSS2 Opera 用于使用固定间距字符格的设备。如电传打字机和终端 tv CSS2 Opera 用于电视类设备 embossed CSS2 Opera 用于凸点字符（盲文）印刷设备 ”CSS文件” type=”text/css” rel=”stylesheet” media=”媒体类型” 2 @import语法 @import url(CSS文件) 媒体类型; @media语法 @media 媒体类型 媒体特性 Media Features媒体特性Value取值 Accepts min/max接受min/max Description简介 width length yes 定义输出设备中的页面可见区域宽度 height length yes 定义输出设备中的页面可见区域高度 device-width length yes 定义输出设备的屏幕可见宽度 device-height length yes 定义输出设备的屏幕可见高度 orientation portrait | landscape no 定义height是否大于或等于width。值portrait代表是，landscape代表否 aspect-ratio ratio yes 定义width与height的比率 device-aspect-ratio ratio yes 定义device-width与device-height的比率。如常见的显示器比率：4/3, 16/9, 16/10 color integer yes 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0 color-index integer yes 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 monochrome integer yes 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 resolution resolution yes 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm scan progressive | interlace no 定义电视类设备的扫描工序 grid integer no 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否 紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性 ”CSS文件” type=”text/css” rel=”stylesheet” media=”媒体类型 and (媒体特性) ...” @import语法 @import url(CSS文件) 媒体类型 and (媒体特性)...; @media语法 @media 媒体类型 and (媒体特性) and (媒体特性){ 重置的CSS样式 } 媒体查询关键字： not 关键字 可以在所有的媒体类型中使用，表示排除掉某种媒体类型。 only 关键字 对于能够识别媒体类型同时支持媒体查询的设备only关键字就当他没有就可以了。 对于支持媒体类型但是又不支持媒体特性的浏览器，他会先读取only而不是screen这样的媒体类型，会导致浏览器不会加载该样式。 对于媒体类型和媒体特性都不支持的浏览器而言，那就别看了。 视窗设置 视窗设置的语句很简单就是一个meta 标签，而且仅对手持设备有效。主要为手机、pad等设备的视窗设定有效。 格式： meta name=“viewport” content=”设备的属性设定” 属