我相信很多网页设计师对响应式设计还有很多疑惑。屏幕分辨率？CSS3 媒体查询？设备宽度？屏幕尺寸？等等。在这些年里，网络设计和电子设备的迅速发展必将导致工作量不断增加。你必须兼容 PC、移动设备、Andriod 和 IOS 等等。然而，事实是，对于纯粹的网页界面设计，我们不需要考虑太复杂的响应。因为响应式设计依赖于前端工程师。

但是，我们不能忽视这一点。如果你是一个团队，你将被前端开发者攻击。

好的，你可以使用 Photoshop CC 直接创建带有不同设备预定义文档大小的文件，提高设计精度。

当然，如果你不使用 Photoshop，你可以看下面的表格。

好了，本文的核心思想来了。设计只是小事，真正的问题是前端开发如何使你的设计支持响应式，这需要一些各种各样的事情。我关注的是：

• 与前端开发人员一起提高响应式设计效率。
• 响应式网页设计断点是 CSS 声明的一个重要方面，它允许在不同的屏幕尺寸下出现不同的布局。
• 尽可能缩短你的代码。

以下代码是我的（以下断点主要用于使用（或不使用）相应的响应式前端框架时的自制样式表）：

a) The Standard Breakpoints. Working with fluid images.

@media all and (max-width: 1690px) { ...}
@media all and (max-width: 1280px) { ...}
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }

b) The Standard Breakpoints. But possibly this is a slightly complicated situation.

@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }

c) The Standard Bootstrap 3.x Breakpoints

@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }

d) The Standard Bootstrap 4.x Breakpoints@media all and (max-width: 1199px) { ... } 
@media all and (max-width: 991px) { ... } 
@media all and (max-width: 768px) { ... } 
@media all and (max-width: 575px) { ... }
 
e) The Material Design Lite (MDL) Breakpoints 

@media all and (max-width: 1024px) { ... } 
@media all and (max-width: 839px) { ... } 
@media all and (max-width: 480px) { ... }

f) Retina Breakpoints(@2x)

@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... }

再次声明：

• 这不是全面的
• 这只是我个人的习惯
• 我只是一个人

常见问题解答：

为什么我使用 max-width: 768px 来兼容 bootstrap3.x 或 v4？
1. 为了方便浏览器调试，因为 768px 是一个常见的断点。所以它不会影响官方的响应式显示效果。
2. 尽可能减少断点。我习惯从 PC 开始，因为 PC 开发通常比移动端更难。

这些断点不一定与官方的相同。有对错之分吗？
断点实际上是根据具体项目设计的。没有绝对的对错。我根据我的习惯和多个项目的实践进行总结，它们不一定与官方数据一致。

上述断点数据的使用示例在哪里？

我们常用断点的示例，请查看：https://github.com/xizon/uix-kit

Retina 问题

这是我使用的常见断点，而不是使用官方数据，它适用于 Retina：http://imulus.github.io/retinajs/（Retina 主要适用于照片）。直接使用 CSS 将更加复杂，如果你想要，可以添加一些大的容器。像这样：

@media all and (min-width:1689px) { … } @media all and (min-width: 960px) and (max-width: 1690px) { … } …

结论：

使用普通断点来进行布局，并使用 JS 控制 Retina 图片。我主要使用 max-width 断点来减少响应式代码（如果没有更复杂的移动 Web）。使用 max-width 断点可以快速完成 :) 也许，我的常用响应式样式是由于个人习惯和不同的目标。 :)

我不一定遵循复杂的断点使用。为一些项目编写一些简化的代码。我目前使用这些简化的断点，你认为怎样？

你应该花些时间问自己是否应该为你的网站使用响应式框架。希望这篇文章对你有帮助：）