工欲善其事，必先利其器，可能是2020年最全面的Web端响应式设计规范，值得你拥有！

本文5500字上下，反复校对8遍以上，初步阅读完大概需要22分钟，若是深入理解并完全吸收则建议“先收藏再反复的读，细细的品”。希望对各位朋友有所帮助，不足之处望校正，祝阅读愉快。

距离上一期整理的移动端设计规范已过去140多天，得到了很多朋友的认同，这次我整理了响应式网页设计规范，希望可以给大家带来一定帮助。不足之处，还望斧正，祝阅读愉快。

开篇前的废话

相信很多朋友在做网页设计的时候，首先遇到的问题就是“以哪个尺寸进行设计？”特别是在当前市场设备众多，既要兼容pc端不同尺寸，又要兼容平板、手机等不同尺寸，一会是苹果端，一会又是安卓端，甚至还要考虑其他智能电视、穿戴设备等等，仅仅要理清设备种类就足够让人晕头转向的，更别谈尺寸了。实际上我们不必害怕，毕竟现在技术成熟，前端大神的响应式大法即能“一键搞定”诸多难题，而对我们设计师而言，也就是水到渠成，越来越科学规范的事情了。下面，正式进去本期主题吧。

Web端网页设计分辨率现状

Web端不同屏幕分辨率占比情况，数据来源百度统计（图一）

移动端不同屏幕分辨率占比情况，数据来源百度统计（图二）

常用网页设计尺寸，Photoshop cc2020新建文档-web（图三）

结合百度统计分辨率占比情况（图一、图二），我们来看Photoshop新建文档的web尺寸模版（图三），可以说Photoshop相当良心，详细的展示了常规设备所涉及到的网页尺寸，把设计师疑虑的尺寸问题统统解决了。对于设计师而言，只需专注内容创作即可。那么问题来了，要满足全站响应，对于我们设计师而言，是不是（图三）中涉及的所有尺寸都要各出一套视觉稿呢？算一下至少也得七八套，这工作量对于设计师而言岂不是超级大？估计设计师得疯了吧。当然，原则上要满足各终端像素级别的还原，肯定是产出更多套设计稿，对前端小哥哥在开发时的参考价值越高，还原度自然也会越完美。

但稳住，别慌！以我搬砖十余年的付出，可以负责任的告诉你：不需要产出这么多套设计稿！！！不管是从投入成本（不为老板节约成本的设计师，不是好的美工～），还是从技术实现层面都不需要。那具体是几套呢？别着急，先让我们从设计师的角度，简单了解下网页设计中网页布局的主要方式吧。（ps：欢迎路过的技术大牛留下更专业的解答）

网页设计中网页布局的主要方式

静态布局

即传统网页设计模式，只需做一套尺寸的设计稿（比如1280*800px），一旦设备分辨率宽度小于1280px，则出现横向滚动条，一旦设备分辨率宽度大于1280px，则内容居中显示，两边留白。（常见于新闻类、电商类、政府类网页），这种布局方式对设计师和前端而言是最简单的。

自适应布局

可以把自适应布局看作是静态布局的一个系列。自适应布局的特点是为不同的屏幕分辨率定义固定布局，即创建多个静态布局。一个静态布局对应一个屏幕分辨率，改变屏幕分辨率可以切换不同的静态局部，但页面元素不随窗口大小的调整发生变化。简而言之就是需要自适应几个终端，就需要出几套尺寸的设计稿。（设计师得哭了～）

弹性布局

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

混合式布局

混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。简而言之就是只需要一套设计稿适应多个终端。（设计师的福音啊～）

自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑，否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。

我所接触的网站项目几乎也都是响应式开发，显然响应式已成为网页设计的标配，而不是什么奢侈品。所以，牢牢掌握响应式布局设计规范也是极为必要的。

响应式网页设计的基准尺寸

了解了网页设计的布局方式，再回到前面的疑问“以哪个尺寸进行设计？”的答案自然就有了，实际上设计师只需出一套尺寸的设计稿给到前端小哥哥响应适配就够了，但考虑到web端和移动端的交互方式有所区别，且不同段位的前端小哥哥执行力也不同，为了确保不出现特别大的差异，我们团队的做法都是设计以下两套基准尺寸，再给到前端进行全站响应。

 web端基准尺寸：1920*1080px

这里在设计时又分两种形式，一种是以1920px全宽尺寸进行设计（常见于个性化网页设计），一种是内容控制在以1200px为宽度尺寸的安全范围内进行设计。具体用那种形式，可根据实际项目情况而定，两种形式仅仅是视觉效果不同。

移动端基准尺寸：750*1334px（375*667px @1）

该尺寸满足了移动端不同尺寸的响应效果，设计规范遵循移动端设计规范，关于移动端设计规范可查看我的上一篇文章 返回首页 了解更多建站资讯