第2讲 响应式Web设计-媒体查询

响应式Web设计1、CSS3媒体查询计算当前浏览器环境的某些方面（如窗口宽度、长宽比和方向等），来确定应用哪个CSS。2、流式网格布局对页面布局元素使用相对CSS比例而不是绝对大小。3、流式图像和媒体通过使用一些CSS技巧，使图像和媒体比例适应其浏览器的大小约束。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。媒体查询能够获取的值如下：•设备的宽和高device-width，device-heigth。•渲染窗口的宽和高width，heigth。•设备的手持方向，横向还是竖向orientation(portrait|lanscape)等。•画面比例aspect-ratio点阵打印机等。•设备比例device-aspect-ratio-点阵打印机等。•对象颜色或颜色列表color，color-index显示屏幕。•设备的分辨率resolution。语法结构及用法媒体查询有两种使用方式，一种是在CSS样式中内嵌“@media”，在同一个CSS中通过不同窗口编写不同的样式去选择。另一种是使用外部样式表的引用，在@import和link中使用“@media”，根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。MediaQueries的使用方法如下所示：@media设备类型only(选取条件)not(选取条件)and(设备特性){样式代码}在样式表中内嵌@media的代码示例如下所示：@media(min-device-width:1024px)and(max-width:989px),(max-device-width:480px)and(orientation:landscape),(min-device-width:480px)and(max-device-width:1024px)and(orientation:portrait){样式代码}简写：@mediascreenand(max-width:640px){样式代码}在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。在CSS3中的MediaQueries模块中支持对外部样式表的引用，使用方法类型如下代码：@importurl(color.css)screenand(min-width:1000px);或：linkrel=stylesheettype=text/cssmedia=onlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px)href=link.cssrel=externalnofollow//*使用link导入外部css文件*/简写：linkrel=stylesheettype=text/cssmedia=screenand(max-width:480px)href=link.css/上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。可用的设备类型在CSS中嵌入“@media”的方式，开头必须书写“@media”,然后指定设备类型（上例使用screen代表电脑显示器）。CSS中定义了10种设备类型可以指定的值设置类型all所有设备braille盲文，即盲人用点字法触觉回馈设备embossed盲文打印机handheld手持的便携设备print文档打印用纸或打印预览视图模式projection各种投影设备screen彩色电脑显示器屏幕speech语言和音频合成器tty固定字母间距的网格的媒体，比如电传打字机和终端tv电视机类型的设备可用的设备特性参数通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。例如，通过设备类型指定电脑显示器，再通过设备特性参数指用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似，分为两个部分，当中由冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值。例如“(min-width:320px)”。CSS中的设置特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用“”和“”这些字符。对于这13种设备特性参数的说明如表：特性可指定值可用媒体类型是否接受min/max前缀特性说明width带单位的长度值例如：640px视觉屏幕/触摸设备允许定义输出设备中的页面可见区域宽度(单位一般为px)，即浏览器窗口的宽度heigth带单位的长度值例如：320px视觉屏幕/触摸设备允许定义输出设备中的页面可见区域高度(单位一般为px)，即浏览器窗口的高度device-width带单位的长度值例如：640px视觉屏幕/触摸设备允许定义输出设备的屏幕可见宽度(单位一般为px)，即设备屏幕分辨率的宽度值device-heigth带单位的长度值例如：320px视觉屏幕/触摸设备允许定义输出设备的屏幕可见高度(单位一般为px)，即设备屏幕分辨率的高度值orientation只能指定两个值：portrait或landscape位图介质类型不允许浏览器窗口的方向是纵向还是横向，当窗口商度大于等于宽度值是该特性值为portait（横向），否则为landscape（竖向）aspect-ratio比例值例如16/9位图介质类型允许定义’width’与’height’的比率，即浏览器的长宽比device-aspect-ratio比例值例如16/9位图介质类型允许定义’device-width’与’device-height’的比率，即设备屏幕长宽比。如常见的显示器比率：4/3，16/9，16/10color整数值视觉媒体允许设备使用多少位的颜色值，如果不是彩色设备，则值等于0color-index整数值视觉媒体允许色彩表中的色彩数monochrome整数值视觉媒体允许定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0resolution分辨率值例如300dpi位图介质类型允许定义设备的分辨率。如：96dpi，300dpi，118dpcmscan只能指定两个值：progressive或interlace电视类不允许定义电视类设备的扫描方式，progressive逐行扫描，interlace隔行扫描grid只能指定两个值：0或1栅格设备不允许用来查询输出设备是否使用栅格或基于位图。1代表是，0代表否可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如以下语句指定了当设备窗口宽度小于640px时所使用的样式：@mediascreenand(max-width:640px){样式代码}可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中，指定方式类似如下所示：@mediahandheldand(min-width:360px),screenand(max-width:480px){样式代码}可以在表达式中加上not关键字或only关键字，not关键字表示对后面的表达式执行取反操作，书写方法类似如下所示：/*样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中*/@medianothandheldand(color){样式代码}/*样式代码将被使用在非彩色设备中*/@mediaalland(notcolor){样式代码}使用only关键字的作用是让那些不支持MediaQueries但是能够读取MediaType的设备的浏览器将表达式的样式隐藏起来。例如：@mediaonlyscreenand(color){样式代码}上面的语句对于支持MediaQueries的设备来说，将能够正确应用样式，就像only不存在一样。对于不支持MediaQueries但能够读取MediaType的设备（例如IE8只支持“@mediascreen”）来说，由于先读到的是only而不是screen,将忽略这个样式。对于不支持MediaQueries的浏览器（例如IE8之前的浏览器）来说，无论是否有only,都将忽略这个样式。先通过一个响应式布局实例，来了解一个响应式布局和MediaQueries的简单应用。在本例中，使用HTML5的结构元素定义5个盒子。当浏览器窗口尺寸不同时，页面会根据当前窗口的大小选择使用不同的样式。主断点主断点主断点320px720px1024px次断点768pxiPhoneAndroid手机横屏iPad及某些Android平板电脑横屏样式微调次断点次断点480px640px当窗口宽度在1000px以上时，页头和页脚分别在页面的最上方和最下方整行显示，中间主体分为三列显示。当窗口宽度在640px以上、1000px以下时,中间的第三列隐藏。而当窗口宽度在640px以下时，5个区块从上往下排列显示。在各自不同窗口大小的子样式区域中，可以继承全局的样式，只要重新设置的需要改变的样式即可。另外，有一些次要的区块内容为了页面摆放合适，可以隐藏它。窗口宽度在1000px以上时的页面显示窗口宽度在640px以上，1000px以下时的页面显示在640px以下的页面显示视口（viewport）视口（viewport）在桌面浏览器中，等于浏览器窗口。视口中的像素指CSS像素，视口大小决定页面布局的可用宽度。视口=窗口移动设备如果同样以浏览器（即设备屏幕）窗口作为视口，那已有的960像素宽的页面布局就会显示成这样。为此，移动浏览器定义了两个视口：①可见视口和②布局视口。①可见视口②布局视口大多数移动浏览器默认把布局视口的宽度设为：980px（IE10默认设定为1024px）…………然后，尽可能放大可见视口，（布局视口宽度保持不变）以便在屏幕中显示完整的网站。所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式，移动设备上的浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部head/head之间加上下面这样的语句∶metaname=viewportcontent=width=device-width;initial-scale=1.0/或metaname=viewportcontent=width=600px/meta标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。可以使用的参数设置如下∶width：viewport的宽度height：viewport的高度initial-scale：初始的缩放比例minimum-scale：允许用户缩放到的最小比例maximum-scale：允许用户缩放到的最大比例user-scalable：用户是否可以手动缩放