一、概念
响应式设计(RWD,Responsive Web Design)是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面,随着屏幕尺寸的改变,自适应地改变页面布局。
二、设计方法
设计师:将网页中的元素分模块设计,针对不同的屏幕,调整出不同的布局。现在流行一种「移动优先」的策略,也就是说先行设计移动端的样式,然后再扩展成为PC端样式,因为移动端的样式相对简单,渐进增强为PC端样式,更为平滑。
前端工程师:将设计狮设计的不同布局,写成CSS文件,适配到不同的分辨率下。同时,他还要使用资源查询(Media Queries)根据不同的分辨率,拉取不同尺寸的资源,以加快页面的加载速度,并且减少流量的消耗。
三、响应式界面的四个层次
1、同一页面在不同大小和比例上看起来都应该是舒适的;
2、同一页面在不同分辨率上看起来都应该是合理的;
4、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;
5、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。
四、响应式设计的要点
1、可伸缩的内容区块,内容区块的在一定程度上能够自动调整,以确保填满整个页面。
2、可自由排布的内容区块,当页面尺寸变动较大时,能够减少/增加排布的列数。
3、适应页面尺寸的边距。
4、能够适应比例变化的图片,对于常见的宽度调整,图片在隐去两侧部分时,依旧保持美观可用。
5、能够自动隐藏/部分显示的内容,如在电脑上显示的的大段描述文本,在手机上就只能少量显示或全部隐藏。
6、能自动折叠的导航和菜单,展开还是收起,应该根据页面尺寸来判断。
7、放弃使用像素作为尺寸单位,用dp尺寸等方法来确保页面在分辨率相差很大的设备上,看起来也能保持一致。同时也要求提供的图片应该比预想的更大,才能适应高分辨率的屏幕。
——部分内容整理自网络——