响应式布局的几点关注

什么是响应式界面？

理论上，响应式界面可以适应不一样的设备。描述响应式界面最著名的一句话就是“Content is like water”。若是显示器是一个容器，那么全部要呈现的网页内容就像水同样。在方而法方，在圆而法圆。

为何要设计响应式界面？

即使是PC或Mac用户，只有一半的人会将浏览器全屏显示，而剩下的用多大的浏览器很难预知。台式机、投影、电视、笔记本、手机、平板、手表、VR等职能设备正在不断增长，主流设备的概念正在消失。屏幕分辨率正在飞速发展，同一张图片在不一样的设备上看起来大小差异很大。鼠标、触屏、笔、摄像头手势等不可预期的操控方式正在不断出现。

响应式界面的四个层次

1.同一页面在不一样大小和比例上看起来都应该是温馨的。

2.同一页面在不一样分辨率上看起来都应该是合理的；

3.同一页面在不一样的操做方式上体验是统一的；

4.同一页面在不一样类型的设备上交互方式应该是符合习惯的。

响应式界面的基本规则

1.可伸缩的内容区块：内容区块的在必定程度上可以自动调整，以确保填满整个页面。

2.可自由排布的内容区块：当页面尺寸变更较大时，可以减小增长排布的列数。

3.适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化。

4.可以适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用。

5.可以自动隐藏/部分显示的内容：如在电脑上显示的大段描述文本，在手机上就只能少许显示或所有隐藏。

6.能自动折叠的导航和菜单：展开仍是收起， 应该根据页面尺寸来判断。

7.放弃使用像素做为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求图片应该比预想的更大，才能适应高分辨率的屏幕。

3种响应式布局的设计方法

（1）中心定位，两侧自适应

将内容和视觉居中，并且把尺寸控制在1000px之内。左右两侧就放 一些辅助信息，让他们根据屏幕宽度自适应便可。

（2）单侧定位，中心延伸展开

将主要内容放在左侧，这是由咱们的阅读习惯所决定的，而后右边放一些辅助信息，中间这块是自适应屏幕宽度内容。

（3）小切糕全屏响应式设计

小切糕全屏响应式设计算是瀑布流里面的一种，是根据屏幕宽度进行计算，以一个较小的单元格为基础，而后以2倍、3倍、4倍等方式进行拓展，并计算出最适合的完整组合。

现实中的布局每每由固定布局、流动布局、混合布局和响应式布局搭配使用：

1.向下兼容屏幕：960宽度以上元素保持不变，宽度缩小至必定值（如750）时响应

2.往下固定布局+响应式：960宽度如下保持不变，960宽度及以上元素根据分辨率变化改变布局。

3.“固定布局+流动布局”或“固定布局+混合布局”或“流动布局+响应式”。

能够参考的案例

1.enochs 连接：http://enochs.co.uk/

2.denisechandler 连接： http://www.denisechandler.com/

3.morehazards 连接：http://www.morehazards.com/