自适应网页设计的方法.doc

自适应网页设计的方法 来源：互联网?作者：佚名?时间：12-13 15:22:55 1、在HTML头部增加viewport标签。?　　在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：?复制代码 代码如下: meta name=viewport content=width=device-width, initial-scale=1 /? 　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。?2、在CSS文件尾部增加针对不同屏幕分辨率的规则。?　　例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。? 复制代码 代码如下: @media screen and (max-device-width: 480px) {?#divMain{?float: none;?width:auto;?}?#divSidebar {?display:none;?}?}? 　　3、布局宽度使用相对宽度。?　　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。?　　4、页面使用相对字体?　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。?　　根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 overflow:hidden; 一行即可解决这个问题）。?　　下图是使用iPhone访问的，经过修改CSS为自适应网页后的月光博客首页页面，看起来比原始的未优化页面好多了吧。?　　总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。以下是更详细的补充资料：随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。 于是，很早就有人设想，能不能一次设计，普遍适用，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？ 一、自适应网页设计的概念 2010年，Ethan Marcotte提出了自适应网页设计（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。 如果屏幕宽度在400像素以下，则6张图片分成三行。 mediaqueri.es上面有更多这样的例子。 这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。 二、允许网页宽度自动调整 自适应网页设计到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 　　meta name=viewport content=width=device-width, initial-scale=1 / viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默