各种大小屏幕的终端显示器
屏幕大大小小,页面如果做固定大小,做大了,在小显示器下放不下,做小了,在大显示器下看,太小气。
我们需要这样子
我们需要:一个网站能兼容多个终端

 

完美适应 电脑·iPad·手机·微信
所谓“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上,目前Google已经明确表明鼓励响应式网页设计。

案例:九牧国际站
www.jomoogroup.com
响应式网页设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸、屏幕定向、系统平台等)以及用户行为(改变窗口大小等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用pc、平板电脑,或者手机,无论是全屏显示还是非全屏的情况,无论屏幕是横向还是竖向,页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。

开发、维护、运营成本优势:
页面只有一个,通过针对不同的分辨率、不同的设备环境进行了一些不同的设计,所以在开发、 维护和运营上,相对多个版本,能节约成本。
兼容性优势:
移动设备新的尺寸层出不穷,定制的版本通常只适用于某些规格的设备,如果新的设备分辨率变 化较大,则往往不能兼容,而开发新的版本需要时间,这段时间内的访问就是个问题,但是响应式 Web设计可以提前预防这个问题。
操作灵活:
响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。
设计难:
设计的时候需要考虑大分辨显示器比如24寸,笔记本,ipad,各种不同大小屏幕手机,传统设计方式只需要考虑一种屏幕。
实现难:
因需针对不同的屏幕大小要写3-4种样式代码,还需要考虑到各种版本浏览器兼容性,这需要有很强很有经验的前端工程师才能胜任。
工作量大:
一个响应式网站的工作量成本是一个正常PC网站的2.5倍。

1.随着移动设备越来越多,可以提升用户体验。

2.该设计没有网页版本区分,所以SEO的策略保持一致。

3.可以避免重复内容,专心维护这一个网页。

4.保持网页的原有链接。

5.可直接嵌入到微信公众号里,不用再单独做微网站微官网,一个网站搞定所有平台