浅析响应式网页设计的实现与优化

  互联网时代的到来对网页的要求也越来越高,为每一种分辨率和新设备创立一个网页版本是不实在践的,如何处置这些效果呢?2010年伊桑·马科特(Ethan Marcotte)发明性地提出了照应式网页设计(Response Web Design)以此来处置这些难题,《照应式网页设计》将活动规划、弹性图片和CSS媒体查询三者结合构成照应式网页。

  那么什么是照应式网页设计?照应式源于照应式修树立计的概念,是指一个空间依据人的行为自动调整空间环境。照应式网页设计依据用户运用的设备环境,将一个网站在小屏幕手机与桌面电脑之间停止网页界面的切换。行将活动规划、弹性图片、CSS媒体查询打破性地整合而成。其实质是网页可以自动响运用户设备,完美地出现出相应的网页规划。该设计和开发依据用户的行为和环境停止照应,即依据屏幕的大小、设备平台和运用方向来作出照应。

  在照应式网页出现以前,以固定宽度为主的页面规划使大少数网站存在一些效果。照应式网页设计的优化体如今以下几个方面:

  第一,不同终端设备的出现,如智能手机、平板电脑等设备存在屏幕尺寸不同的效果,且新的屏幕尺寸设备的不时研发,在大小、功用甚至分辨率上都会发作变化。当用户从便携式电脑切换到ipad时,照应式网页即刻切换到相应的分辨率、图片尺寸和脚本。

  第二,各种操作系统的出现,如Windows、Android、IOS等系统,它们之间相互兼容,处置跨阅读器的效果。照应式设计可以依据用户的阅读器版本,既保证老版本的可照应性,又为高分辨率显示器提供相应的页面内容,运用户体验失掉最佳效果。

  第三,桌面版阅读器满足不同视口大小、旋转方向的需求。如今许多用户没有最大化他们的阅读器,而屏幕自身有太多可调整的空间,如将阅读器视口调小,那么网站的规划就不能完整地出现出来。随着iPhone、ipad和智能手机的盛行,许多新的设备可以依据用户的行为在竖屏和横屏之间停止瞬间切换,照应式网页可以依据不同视口,为现有及未来的各种设备作出快速照应,出现出完整的页面规划。

  在了解照应式的同时,我们就会提出如何完成照应式网页设计:

  首先,在丹·锡德霍姆(Dan Cederholm)编写的《无懈可击的Web设计》一书中,伊桑·马科特为其撰写了一章关于活动规划的内容。在书中,他提出了一个规范化的公式,即“目的元素宽度÷上下文元素宽度=百分比宽度”。

  其次,CSS媒体查询的运用,其中min-width和max-width这两个属性值的设定,可以调理网页照应不同阅读设备的宽度范围,可以在设备屏幕宽度高于这个值的状况下,为页面指定一个特定的样式表,应用CSS媒体查询支持不同的视口大小婚配CSS样式。

  再次,是弹性图片的运用。运用CSS的max-width停止复杂的修复,该方法在伊桑·马科特关于活动的图片的文章中提到过。

  随着移动无线网络数据的提速,移动设备已成为人们上网的主要方式,不时推出的移动产品改动了用户运用小屏幕设备上网的习气,这些设备上的阅读器在设计时会思索到如何显示现有网页。手机阅读器会将一个规范网页增加到最小视口,然后用户在自己感兴味的内容区域上缩小阅读。这样看起来曾经很好,但是作为前端设计师为什么还要在这下面继续优化呢?

  首先,网站可以更少停止维护。一个照应式网站的维护本钱较低,在一切类型的设备上只需求一个网站任务便可,这曾经在很大水平上增加了网站开发的任务量。而开发一个独立的移动网站,实践上是拥有了两个独立网站,那么就需求两个网站的维护量,也有能够形成网站数据的不同步。

  其次,不需求另外的域名。原本固定式的网页需求树立桌面版和移动版两个网站,而运用照应式网站则只需一个网站。

  照应式网页设计为我们翻开了新思绪,运用已有的活动规划、弹性图片和媒体查询技术其实并不新颖,而伊桑·马科特将这三者结合运用到界面设计中是十分具有开创性的。我置信在多屏设备不时开展的明天,照应式网页替代固定式网页设计已成为一个新趋向。

提供最优质的资源集合

立即查看 了解详情