响应式布局教程1介绍

响应式布局介绍主讲人：高洛峰&妹子

不管您的用户使用何种终端访问您的网站，都能够自动识别适应终端设备的分辨率以及宽度，让您的网站在众多设备中无缝浏览(在CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等)。对于智能手机和平板电脑的逐渐普及，普通的网站对于这些持有移动设备的用户来说，访问无疑是困难的，他们必须在设备上放大和缩小整个网页，以便能够阅读适合字体大小，稍不小心可能会点错进入别的区域，这种状况在响应式网页设计中会有所改善。响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，可以说响应式的布局是大势所趋，现在越来越多的网站开始采用响应式的布局方案。响应式布局的优缺点

使用响应式布局的优点比较明显，就是面对不同分辨率设备灵活性强，还有就是能够快捷解决多设备显示适应问题，也就是在非响应式web设计中，多设置中访问视觉不统一，非最佳视觉，而在响应式设计中能达到多终端视觉和操作体验非常风格统一。并且可以做到兼容当前和未来设备，另外响应式web设计中的大部分技术都可以用在WebApp开发中，这是是现在比较流行的开发模式。还可以节约开发成本，维护成本也轻松很多。当然也存在缺点，像兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长（相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多）；多方面因素影响而达不到最佳效果；在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。所以是否在你的产品中使用响应式布局方案可以折衷考虑。响应式布局该怎么设计

一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是三列，在大屏手机上是三行，在屏幕小于320的手机上只显示主要内容，隐藏掉了次要元素。

我们知道，在不同的设置中，浏览的窗口尺寸可能是不同的。如果只针对某种窗口尺寸来制作网页，在其他设备中呈现该网页就会产生很多问题，如果针对不同的窗口尺寸制作不同的网页，则要制作的网页就会太多。为了解决这个问题在CSS3中加入了MediaQueries模块（媒介查询），是制作响应式布局的一个利器，使用这个工具我们可以非常方便快捷的制造出各种丰富的实用性强的界面。MediaQueries模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下，在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。到目前为止，MediaQueries模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询mediaquery兼容问题。还有IE8及以下版本浏览器不支持媒体查询，虽然也有好多解决方案，几乎都是通过下载JavaScript插件实现，但没有必要去解决这个问题，因为小屏幕显示都是在移动端使用，IE低版本只要按正常电脑页面显示页面布局就可以了。在开发中只要拖动浏览器也可以触发判断条件，测试的时候你不需要去找一堆手机，只要把自己的浏览器窗口缩小到一定尺寸就可以了。另外还有一个不错的在线Web工具-Responsivator（开源的直接在下载），提供了很多不同的尺寸屏幕的展