CSS3自适应网页设计与media queries

今天，我们要隆重学习Responsive web design 自适应网站设计这个玩意儿！为什么说隆重呢？因为实在有太多经典的案例值得我们仔细琢磨，这对于提升我们在制作网站时考虑硬件设备的兼容性太重要了，如今的屏幕太多！！好吧，先上一个图，mediaqueri.es 这个网站是专门介绍media queries案例和自适应网站设计，非常经典，看一眼，咱们深入讨论Responsive Web Design!

 网站设计" src="/upload/users/1/20131206/1053345545-0.gif" width="651" />

一、设备多样性

如今，随着电脑屏幕分辨率的增大以及移动设备对web应用的支持，用户可以选择越来越多类型的屏幕访问网页。这时，如何保证网页在不同设备间展示最佳的页面布局和样式呢？

 网页设计 设备多样性" height="270" src="/upload/users/1/20131206/1053343049-1.jpg" title="自适应网页设计" width="585" />

从硬件设备来看，大分辨率电脑屏幕从传统的800*600到现在1080P的分辨率，甚至4K分辨率的显示设备也已经出现，屏幕类型也呈现4：3、14：9等多种类型。在移动设备上，更是出现了各种大小不一的屏幕。手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。PC、上网本、平板电脑、智能手机等设备，谁知道明天会出现什么新设备呢？

二、设计兼容性

同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

对，这就是“自适应网页设计”。2010年，Ethan Marcotte提出了“自适应网页设计”（RWD：Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。同时，他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。这6个图像能根据屏幕大小自动布局，如果屏幕宽度大于1300像素，则6张图片并排在一行；如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行；如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部；如果屏幕宽度在400像素以下，则6张图片分成三行。这种灵活的处理方式保证了在不同的设备中，网页的浏览效果能自动调整为最佳状态，从而改善用户的浏览体验。如今，自适应设计已经得到了广泛的认可和实践，国外很多专门设计过的网站, 尤其以blog和企业网站为多, 都是RWD.比如think vitamin .打开这个网站, 不管你把窗口如何调整大小，它的阅读感受不变，然后舒适，不恶心。所有的图片字体模块都会根据你的变化而变化, 这就是RWD。而本文开头那个图片展示的，正是搜罗的符合RWD理念的网站例子，mediaqueri.es这个网站可以看到全球众多RWD设计良好的网站，而Responsive Design bookmarklet 这个工具则可以帮你在一张网页上，同时显示不同分辨率屏幕的测试效果。

三、传统解决之道

RWD理念是个好东西，但要想真正做到RWD并不那么轻松。不过，别担心，除了真正改变自己的设计思维有时有点复杂外，真正操作起来的方法有很多选择，我们逐一看看吧！

Fluid Grids 流式布局
RWD的关键核心是关于Fluid Grids的用法。 Ethan marcotte的文章Fluid Grids 告诉了你什么是Fluid Grids。 在网页设计中, 制作一个能随着浏览器的大小改变的"流式布局"并没有那种固定大小的layout来的轻松，设计师需要考虑的因素相比固定大小的Layout肯定要多一些，通常页面设计师会固定一个数值(px)，因此，首先需要改变的就是这种偷懒的思维，现在开始，流式布局！！！抛弃固定px的做法：

 width属性考虑用百分比%
字体大小考虑采用相对单位em
图片考虑根据屏幕类型显示不同分辨率的图像
注意，Fluid Grids在设计时不是用传统的像素或者任意的百分比值，而是在比例方面经过精心计算的一个数值百分比。这样, 当一个图层在从正常尺寸转到一个更大或者更小的容器中比如手机或平板电脑什么的，它里面的元素的宽度会根据不同条件进行resize, 成为另一个图层。为了计算出每个页面元素的精准百分比， 你必须除以它的上下文目标元素。 现在, 最好的方式就是先用比如ps之类的软件创建一个高保真的小样. 有了这个小样，你可以方便的测量你的页面原色然后除以你所设定的小样的宽度。举个例子，如果你的图层是960px宽的， 那这就是你的"容器"的宽度，然后，比如我们的目标元素，有个相对的值，向300px什么的，那么就用300除以900， 就得出了百分比值为31.25%，而这就是我们的目标值。

 实话说，有时候，这种计算过程非常坑爹，特别是你事先不清楚显示内容时。但我们可以尽量简化这一过程。对于内容布局不太复杂的设计，可以优先考虑下面的方式。

 允许网页宽度自动调整

在网页代码的头部，加入一行viewport元标签。

?123      <meta name="viewport" content="width=device-width, initial-scale=1" />    viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用<A href="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" target=_blank>css3-mediaqueries.js</A>,这是一个解决css3 mediaqueries兼容性的JS插件。

?12345 <!--[if lt IE 9]>  　　　<script src="<A href="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js'></script">http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script</A>>  <![endif]-->

 四、CSS3自适应设计之media queries

RWD的另一个解决方案 就是CSS3 Media Queries，目前基本上大部分浏览器都支持。 如果你还不熟悉CSS media queries，稍微解释一下，它就是允许您收集有关网站的访问者的数据，并用它来有条件地应用CSS样式。 比如, 我们现在需要得到一个最小的宽度的媒介，如果浏览器窗口低于某一特定的宽度， 我们可以指定能够适用于特定的CSS样式。如果我们要在移动媒介上运用这些样式，那我们的media query就会像这样：

@media screen and (min-width: 480px) { 
 .content {    float: left;  }  
.social_icons {    display: none  }
   // ...
}

关于@media的用法，详细可以参考《CSS3 Media Queries介绍--适应不同媒介设备》

从目前的设备情况来看，建议一般的目标像素设置为:320px 480px 600px 768px 900px 1200px  基本上可以覆盖95%以上的设备类型！