响应式网页设计（Responsive web design）已经开始越来越重要了，你为什么要在乎他？因为现在用户浏览你的网站会使用不同的设备，桌面电脑、平板电脑（如iPad）、移动设备（如iPhone、Andriod...），响应式的网页设计就是让你根据用户浏览网站的所使用的设备，来为他们自动分配不同的样式。比如你可以给自己的网站设计一个移动设备的版本，当用户使用iPhone浏览你网站的时候，所看到的是你设计好的移动版本的网站。
其实他真的没有你想你的那么难，这篇文章用三步教会你响应式的网页设计，至少你大概可能理解他到底是怎么一回事儿。假设你已经搞懂CSS和基本的HTML，嘿！还不知道CSS与HTML？你可以观看我们的《CSS基础教程》。
第一步，Meta 标签
大多数在移动设备上的浏览器缩放HTML页面为一个宽视点，让他可以适应屏幕的宽度，你可以使用视口（viewport）meta 标签去重置他，下面的视口标签告诉浏览器使用设备的宽度作为视点的宽度，禁用原始的缩放，把这个meta标签放在<head>里面。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8或比他还老的浏览器不支持media query，你可以全用media-queries.js或respond.js，用他们让IE也支持media query。
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
第二步，HTML结构
这个示例里，我们设计了一个基本的页面布局，一个header（页头），content（主体内容），sidebar（边栏），还有footer（页底），header的固定高度为180px，content宽为600px，sidebar宽为300px。
第三步，Media Queries
CSS3 media query是响应式设计的一个小技巧，他告诉浏览器在不同的视口宽度下使用不同的方式去显示页面。
下面的规则会在当视口宽度是980px或更小的情况下生效，我把所有的窗口宽度从像素值设置成了百分比，这样窗口就会变成流体宽度。
下面是视口为700px或更小的宽度，指定#content与#sidebar为自动宽度，移除了float，所以屏幕有多宽，他们就会显示为多宽。
下面是视口为480px或更小的宽度（移动设置的屏幕），重置#header的高度为自动，更改h1的字体大小为24px，并且隐藏了#sidebar。
到现在你能明白什么是media query了吗？还有什么是响应式设计？其实很简单，先判断视口宽度，然后对他们分别应用我们事先为不同视口宽度设置不同的CSS规则。
评论
我用MEDIA QUERY做了个响应式网站，觉得还不错，就是有的手机不支持 http://webto-promotion.com/
12 年 10 个月 以前