响应式网站设计注意事项

最近在公司写的页面的都是使用了响应式布局，也正是这点在设计与开发沟通上引发了许多口水，因此在设计规范上写下几点需要注意的地方，望共勉。

一、什么是响应式设计？
先科普一下，所谓的响应式网站就是网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。效果如图下：

pc端环境下效果
平板环境下效果
移动端环境下效果

通过以上图片可以发现不同设备环境下网页的布局结构是不一样的，但内容却不变。

二、注意细节
A、尽量避免大量使用图片充当背景。在响应式网站上，不同设备下背景图片适配是开发者的一个痛点。在开发原理上，前端是按比例适配图片，那么这将出现以下三种情况：
1、第一种：按容器比例撑满。如图2-1-1：

图2-1-1
图片看起来好像没有问题，但是在小设备环境下图片会出现压缩变形的情况。如图2-1-2： 图2-1-2

2、第二种：图片宽度按容器比例撑满、高度自适应大小。如图2-2-1：

图2-2-1

图片看起来好像也没有问题，同理在小设备环境下图片底部会出现空白情况。如图2-2-2：

图2-2-2

3、第三种：把背景图片放大到适合元素容器的尺寸，图片比例不变。如图2-3-1：

图2-3-1
图片看起来好像没有问题，同理在小设备环境下超出容器的部分可能会裁掉。如图2-3-2：
图2-3-2
解决方案：
一张背景图片引发各种强迫症，骚年你还敢乱用？

1、尽量少用图片充当背景（这里指的是在响应式网站上）
2、通过调查使用裁剪这种方法比较多，设计师需要输出不同设备下的背景图片（pc 平板 移动端）。
3、可以使用背景图片，但是背景和图片需要分开，而且背景只能是纯色调或者是有规律的图片（这样前端可以重复使用背景图片。就可以避免底部出现空白的尴尬情况了）。
4、设计师输出不同设备下的图片效果（不推荐、效率低）

B、该显示的显示该隐藏的隐藏。例如导航栏，在pc端显示上导航的存在可能没什么，如图2-2。但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。在移动端上导航可以用汉堡按钮的形式展现。如图2-3

图2-2 N年前的毕设 图2-3

C、不同设备环境下使用不同布局结构，这样能显示最友好的视觉效果。

如图3-1在pc端环境下显示左右列表布局。

图3-1

在移动端环境下显示上下列表布局，如图3-2。

图3-2

三、使用场景
并不是所有网站都适合用响应式，如果用了响应式，那么移动端的UI就不能要求太高，毕竟响应式只是适配一下排版布局，排版都是按规律顺序进行调整的。如果移动端UI和PC端相差太大，那还不如直接写2套代码性能还更好。而且，后期响应式网站维护起来也不简单。

如果是单个页面或比较少页面的网站（网站结构不复杂的，比如官网、个人博客等），建议做响应式；
反之，不建议（比如商城、社区等）。

四、总结

以上就是我对响应式设计的一些总结，在实施上需要设计狮和前端er一起探讨制定规范。

简书其他封面.png