《响应式web设计》读书笔记（二）媒体查询
一、什么是媒体查询？
媒体查询就是向设备提问，如“你是一块屏幕吗？”，然后根据回答来进行处理。媒体查询其实不是一个新概念，在HTML4中就已经有了。你肯定见过它：
<link rel="stylesheet" type="text/css" media="screen" href="some.css">
在HTML4中，仅可以用来为不同的设备指定引入不同的样式文件，像上面的screen。功能太单一了所以没发挥什么大作用。但现在不同的，CSS3为它赋予了新的定义，媒体查询能问设备的问题大大增多，包括已经被大家熟知的视口宽度和设备宽度等。在响应式设计中，为了在不同尺寸的屏幕上显示不同的布局（样式），媒体查询是一把核心利器。
媒体查询的支持程度如何呢？现代浏览器已经广泛支持了（Firefox3.6+、Safari4+、Chrome4+、Opera9.5+、IOS Safari3.2+、Opera Mobile10+、Android2.1+、IE9+）。对于低版本的浏览器（IE8及以下），也有相应的js修复办法。Respond.js（http://github.com/scottjehl/Respond）就是这样一个工具。但是我觉得，响应式设计主要是用户适配移动设备的，有谁会在移动设备上使用IE6吗？（大家看~我的ipad~刷了一个XP系统哦~）。个人觉得这个工具的开发简直多此一举。
二、媒体查询的语法
在引入css文件的时候，media属性可以为表达式，如下：
<link rel="stylesheet" type="text/css" media="screen and(max-width:900px)" href="some.css">
表示当设备是一块屏幕并且宽度在900像素以内时进入some.css这个文件。可以看到只是对原来的一种查询条件增强。当有多个条件时使用and连接。如果你想使用一个查询列表，当设备满足其中一项就返回真，这个时候用逗乐连接各查询语句，例如：
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px) , (orientation:portrait)" href="some.css">
表示当设备宽度在600px以内或者是竖屏时，引入some.css。
另外一种使用方法是在css样式中写，只要一看例子就明白了，语法都一样：
<style> #main{ background-color:yellow; width:960px; font-size:80px; } @media screen and (max-width:600px) , (orientation:portrait){ #main{ background-color:green; } } </style>
三、视口（viewport）这个东西
关于这部分概念，我不得不吐槽一下，作者讲的也太粗略了，边举例边讲，似乎知识点部分给忘了介绍了。使我不得不从网上搜索其他资料。幸好，W3C的这篇文档讲的很详细。链接：http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2。
viewport其实就是指浏览器内容区域，不包括工具栏和状态栏。媒体查询使用的max-width这里的width就是指viewport的宽度啦。这里还有另一个概念，那就是虚拟画布。如果你用手机访问一个非手机版的网页，会发现该网页也可以很好的显示，只是页面被缩小了。其实，这就是页面先使用虚拟画布渲染好，然后再缩放为与实际视口相同的尺寸显示。IOS上默认使用980px的虚拟画布进行渲染，所以大部分网页在手机上都可以正常显示。
当然，我这里说的正常是指布局没有混乱。但是我们在做响应式页面的时候，不希望页面没缩放。比如我想让我的横向导航栏在移动设备上变为纵向导航栏，而不是被缩小后的横向的。该怎么办呢？思路很简单，只要别让它按照虚拟画布的尺寸进行渲染就可以了。代码你肯定见过好多次了：
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
它表示页面按照1:1缩放，并且渲染的宽度按照设备宽度，这样便不会再替你缩放了。我们可以从容的按照自己想要的显示方式来响应式设计了。
其实我还想做一个工作，就是拿到各个设备的viewport临界值，比如：iPhone、ipad mini、ipad、还有更乱的android系统的各种屏幕。现在网上也有一些值，但是我在测试的时候发现有的对有的不对，所以还得靠自己啊。可惜现在手头没有设备，先记下来，以后有了设备，必定亲手测一遍。
四、关于内容优先和流式布局
看到内容优先这几个字的时候，我小小的激动了一下，因为我曾几何时就有过这样的念头。
我的想法是这样的：浏览器解析一个页面是从上到下进行解析的，如果某个页面是这样的：
那相应的HTML代码应该是这样：
<div class="header"></div> <div class="left"></div> <div class="main"></div>
这样用户真正想看到的东西是最后被加载的，在这之前还得加载并不关心的头部和左侧区域。如果能够把HTML代码变成这样：
<div class="main"></div> <div class="header"></div> <div class="left"></div>
这样可以首先加载内容区域，减少用户等待的时间。同时页面显示还是原来的。
作者此处用float布局来实现了这样的效果，但是个人觉得不是很好。首先用float进行布局本来就不是一种很好的选择，其次，在进行响应式设计的时候，势必得用流式布局。既然网页中的内容都是“流动”的，如何做到交换了元素的位置还能让它正常流动呢？
这个问题我现在也在思考，还未有解决办法，如果哪位仁兄知道办法，务必跟我说一声哦，大家共同学习一下。
今天的读书笔记到此结束了，感觉还是不够流畅，不够有水平。下一章将讲流式布局，希望能找到我问题的答案，同时也希望我的写作水平能提高。
