响应式网站设计尺寸该怎么做？
时间：2024-02-08 03:55:01 | 来源：网站运营
时间：2024-02-08 03:55:01 来源：网站运营
响应式网站设计尺寸该怎么做？：最近在公司写的页面的都是使用了响应式布局，也正是这点在设计与开发沟通上引发了许多口水，因此在设计规范上写下几点
响应式网站设计注意事项，望共勉。
一、什么是响应式设计？
先科普一下，所谓的响应式网站就是网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。效果如图下：
pc端环境下效果平板环境下效果移动端环境下效果通过以上图片可以发现不同设备环境下网页的布局结构是不一样的，但内容却不变。
二、注意细节
A、尽量避免大量使用图片充当背景。在响应式网站上，不同设备下背景图片适配是开发者的一个痛点。在开发原理上，前端是按比例适配图片，那么这将出现以下三种情况：
1、第一种：按容器比例撑满。
图片看起来好像没问题，但是在小设备环境下图片会出现压缩变形的情况。
2、第二种：图片宽度按容器比例撑满、高度自适应大小。
图片看起来好像也没有问题，同理在小设备环境下图片底部会出现空白情况。
3、第三种：把背景图片放大到适合元素容器的尺寸，图片比例不变。
图片看起来好像没有问题，同理在小设备环境下超出容器的部分可能会裁掉。
解决方案：
一张背景图片引发各种强迫症，骚年你还敢乱用？
1、尽量少用图片充当背景(这里指的是在响应式网站上)
2、通过调查使用裁剪这种方法比较多，设计师需要输出不同设备下的背景图片(pc 平板 移动端)。
3、可以使用背景图片，但是背景和图片需要分开，而且背景只能是纯色调或者是有规律的图片(这样前端可以重复使用背景图片。就可以避免底部出现空白的尴尬情况了)。
4、设计师输出不同设备下的图片效果(不推荐、效率低)
B、该显示的显示该隐藏的隐藏。例如导航栏，在pc端显示上导航的存在可能没什么，如图2-2。但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。在移动端上导航可以用汉堡按钮的形式展现。
C、不同设备环境下使用不同布局结构，这样能显示最友好的视觉效果。
三、使用场景
并不是所有网站都适合用响应式，如果用了响应式，那么移动端的UI就不能要求太高，毕竟响应式只是适配一下排版布局，排版都是按规律顺序进行调整的。如果移动端UI和PC端相差太大，那还不如直接写2套代码性能还更好。而且，后期响应式网站维护起来也不简单。
如果是单个页面或比较少页面的网站(网站结构不复杂的，比如官网、个人博客等)，建议做响应式；
反之，不建议(比如商城、社区等)。
四、总结
以上就是对响应式网站设计注意事项的一些总结，在实施上需要设计师和前端er一起探讨制定规范。
最后推荐一套UI设计视频教程，包
含PS+AI+C4D+平面设计+UI设计等，建议收藏！
如有帮助，麻烦关注、点赞哟！
在线咨询
