如何设计响应式网站？

目前的响应式设计一般考虑四种尺寸（宽高一般是按照9:16的比例计算，然后减去浏览器顶部和底部导航栏的高度）：

手机：360px（5寸左右的手机，一般最低都兼容320px，下面的手机基本都淘汰了，不用担心）

Tablet: 361 - 1024 px（现在连11寸的笔记本都不用1024分辨率了，直接赋值给平板）

主流PC显示器：1025 - 1920 px（1080P是目前桌面显示器的主流）

超清PC显示器：1921 - 5120 px（主要考虑2K、4K、5K等超高分辨率，以后考虑）

1. 手机

响应式设计的正确流程应该是先移动端，然后逐渐放大到更大的尺寸，所以应该优先设计手机端的样式，而不是设计传统的桌面网站，然后试图压缩到移动端电话。至于如何设计手机Web界面，这里就不赘述了。相信各位设计师朋友们都有自己的想法。

2. 平板

平板端基本上就是移动端的放大版，直接复制可以完成75%的工作，但是直接复制单个元素会显得太大，毕竟页面分辨率几乎是3倍上一个。因此，平板终端的布局可以比移动终端多分几列。比如直接在移动端设计一个ListView，在平板端可以分成2~3列。移动端全屏宽度的按钮在平板端会显得过长。可以考虑适当缩短，留出足够的高度供手指敲击。移动端必须隐藏的导航、菜单等可以考虑直接显示，填补多余的空间。

3. 主流PC显示器

这个没什么好说的，传统的网页设计想必大家都很熟悉了。这里唯一要注意的是保持布局的连贯性。响应式设计的PC端由平板端放大适配。它可以显示更多内容，但与平板端应该不会有太大区别。确保用户能够识别出这两个是同一个网站。

4. 超清PC显示器

过去没有考虑到这一点。那时候1080P还是一个很流行的概念，1024px还是笔记本的分辨率。但现在随着2K/4K屏幕的逐渐普及，这部分用户的占比开始一点点增加，问题逐渐凸显，不容忽视。没有特殊适配方案的网页在这些环境下会出现两种情况：原本适配全屏的页面会被拉得太宽，原本定宽页面的两边会留下一大片空白.面对这一事实，设计师在设计适配方案时需要考虑页面在这些设备上的外观。