网站设计如何区别响应式和自应布局
经常有客户会问响应式结构和自顺应结构会有什么样的差别?今天就我们前端设计法式员跟年夜家聊一聊,起首我们先懂得一下什么是响应式结构和自顺应结构。
响应式结构:
响应式结构是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站可以或许兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网阅读而出生的。
响应式结构可认为分歧终端的用户供给加倍舒适的界面和更好的用户体验,并且跟着今朝年夜屏幕移动装备的普及,用年夜势所趋来形容也不为过。跟着越来越多的设计师采取这个技巧,我们不仅看到许多的立异,还看到了一些成形的模式。
自顺应结构:
自顺应网页设计(Responsive Web Design)指能使网页自顺应显示在分歧年夜小终端装备上新网页设计方法及技巧。
跟着3G的普及,越来越多的人应用手机上彀。
移动装备正跨越桌面装备,成为拜访互联网的最常见终端。于是,网页设计师不得不面临一个难题:若何能力在分歧年夜小的装备上出现同样的网页?
手机的屏幕比拟小,宽度平日在600像素以下;PC的屏幕宽度,一般都在1000像素以上(今朝主流宽度是1366×768),有的还到达了2000像素。同样的内容,要在年夜小迥异的屏幕上,都出现出满足的后果,并不是一件轻易的事。
许多网站扶植的解决办法,是为分歧的装备供给分歧的网页,好比专门供给一个mobile版本,或者iPhone / iPad版本。如许做虽然包管了后果,然则比拟麻烦,同时要保护好几个版本,并且假如一个网站有多个portal(进口),会年夜年夜增长架构设计的庞杂度。
于是,很早就有人假想,能不克不及"一次设计,广泛实用",让统一张网页主动顺应分歧年夜小的屏幕,依据屏幕宽度,主动调剂结构(layout)。
那制造网站的时刻“什么样的网站/项目合适应用自顺应结构(固定断点)?什么样的网站合适响应式结构?(流体网格)”
理论上来说,响应式结构在任何情形下都比自顺应结构好一些,但在某些情形下自顺应结构更切现实。
自顺应结构可以让你的设计加倍可控,因为你只须要斟酌了了几种状况就万事年夜吉了。但在响应式结构中你可能须要面临异常多状况——是的,年夜部门状况之间的差别很小,但它们又切实其实是分歧的——如许一来就很难确实搞清你的设计会是什么样。同时这也带来了测试上的难题,你很难有绝对的把握猜测到它会如何。换个角度说,这也是响应式结构的魅力地点。经由过程许可外面上的不肯定身分存在,你可以获得更高条理上切实其实定。固然你无法在准确到像素级别精确预知你的设计若何在943px×684px视觉区域汇中展现,但你能肯定的是它们必定能展现的很好——不管是表层特点照样结构构造都有条不紊。
自顺应结构有它本身的优势,因为它们实行起来价值更低,测试更轻易,这往往让他们成为更切现实的解决计划。自顺应结构可以看做响应式结构的“穷兄弟”,在资本有限的情形下就可以让它出马。特殊是改良现有网站的时刻尤其奏效,因为全体重写代码在这时并弗成行。这种案例中,采取自顺应结构是一个不错的动身点。
其实无论是哪种设计理念都是各有优缺的,照样要从小我现实去求动身去选择!