自适应网页的特点

来源:eidea编辑:谢孟丹浏览量:550
随着无线网络的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

视口元标记可以指示浏览器如何根据设备的宽度来调整网页的尺寸和缩放比例。如果没有视口元标记元素,那么在默认情况下,移动设备浏览器会根据桌面设备屏幕的宽度(通常约为 980 像素,但因各种设备而异)来呈现网页。此外,为了尽可能使内容看起来更加美观,移动设备浏览器还会放大字体,并缩放内容的比例以适应相应屏幕的尺寸,或仅显示可在相应屏幕内显示的部分内容。

对于用户来说,这意味着屏幕中显示的字体大小可能并不一致,并且用户可能需要点按两次或通过张合手指进行缩放才能够看到内容以及与内容互动。对于 Google 来说,我们不会将这类网页视为适合在移动设备上浏览的网页,因为它需要用户在移动设备上进行这种(或这类)互动。

一、"自适应网页设计"的概念

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。如果屏幕宽度在400像素以下,则6张图片分成三行。mediaqueri.es上面有更多这样的例子。这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

二、自适应网页设计的特点

1、允许网页宽度自动调整
2、不使用绝对宽度
3、相对大小的字体
4、流动布局(fluid grid)
5、选择加载CSS
6、CSS的@media规则



我们推荐使用自适应网页设计是因为它有许多优势:

使用单一网址,可让用户更轻松地分享并链接到您的内容。
有助于 Google 的算法为网页准确地分配索引属性,无需表明存在对应的桌面版/移动设备版网页。
需要较少的工程人力资源投入即可维护包含相同内容的多个网页。
降低了出现影响移动网站的常见错误的可能性。
无需重定向即可使用户获得已针对设备进行优化的视图,从而缩短加载时间。此外,基于用户代理的重定向不仅容易出错,而且会使网站的用户体验大打折扣(有关详情,请参见“检测用户代理时的常见问题”部分)。
在 Googlebot 抓取您的网站时可节省资源。对于采用自适应网页设计的网页,一个 Googlebot 用户代理只需抓取您的网页一次(而不是像使用不同的 Googlebot 用户代理时那样需要抓取多次),即可检索到所有的内容版本。提高抓取效率可间接协助 Google 将您网站的更多内容编入索引,并确保抓取的内容是最新的。

不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

响应式案例欣赏

摩行侠

响应式企业官网设计开发

莱佛士教育学院

知名教育培训机构官网定制设计

中联建业集团

房地产集团官网