css-响应式si上媒体查询的常见断点
因此，我正在我的第一个响应式网站上工作，该网站广泛使用了媒体查询。 我想知道是否应该优化一些常见的页面宽度。
我可能会有一个最大宽度（不能完全流畅），我想我可能会设置3-5个宽度，它们之间有一些有趣的CSS3过渡（类似于CSS Tricks的工作方式）。
目前我使用的数字有些随意：
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
另外，我想我已经读到一些移动设备的表现与预期不符（@media）。 这在哪里发挥作用，我应如何应对这些情况？
- 这对于移动屏幕尺寸非常有用。
- 屏幕分辨率统计的绝佳指南
- 如果可以访问，有关分辨率的Google Analytics（分析）数据也可能很有价值。
另外，除非您希望用户在非移动设备上调整浏览器窗口大小时能看到您的移动样式，否则我绝对建议您为移动大小使用device-width。 width是视口的宽度，而device-width是设备的当前分辨率。
另外，我想我已经读到一些移动设备的表现不如预期（@media）。
你是对的。 许多设备都无法提供您期望的width或device-width，尤其是在横向和纵向切换时（纵向时通常会提供横向宽度）。 设备自动缩放还可以将扳手插入东西。 使用视口元标记可以帮助解决许多此类问题。 （有关更多信息，请点击此处）
在确定媒体查询的断点时，请考虑以下现实：
- 数千种不同的设备上有数百种不同的屏幕尺寸。
- 未来将带来新的屏幕尺寸。
- 苹果，三星，微软，LG，诺基亚和任何其他设备制造商都可以随时更改其流行型号的屏幕尺寸。
视口的可能性如此之多，将断点与特定设备相匹配听起来并不有效。 紧跟流行，新变化以及已更改的内容将是一项永无止境的任务。
更好的方法可能是根据内容和布局设置断点。
通过这种方法，您的站点将使用其自然断点来适应所有视口大小，而不是针对当前常见屏幕大小的人为断点。
这种方法是如此简单和容易，可能难以置信：
- 在台式机或笔记本电脑上运行您的网站。
- 缩小浏览器窗口时，请注意网站的响应方式。
- 当您的布局不再完美时，这就是您的第一个断点。
- 调整您的网站适合该屏幕尺寸（可能与任何设备无关）。
- 继续缩小浏览器窗口。
- 当您遇到下一个布局问题时，这就是您的第二个断点。
- ... 等等等等。
当然，如果您设计的是移动设备优先的产品，那么过程将相反：从窄屏开始，然后逐步解决。
使用自然的断点，您不再需要关注视口大小的庞大范围，因为您的站点现在和将来都将适应任何设备。
一位开发人员认为，这种方法将断点带到了他们的初衷：
我不确定我们是如何想到“特定于设备的” 断点” ...据我所知，术语“断点” 始终是对内容或布局将“中断”的位置的引用 （即出现瑕疵），因此您需要在以下位置应用媒体查询 那一点。 但我想那只是语义，我一直以为 在内容上下文中引用断点是常识 或布局。
〜Louis Lazaris，ImpressiveWebs
资源： [https://sensitivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450]
更多信息（外部站点）：
- 为什么您不需要设备特定的断点
- 在响应式设计中设置断点
- Google Developers：如何选择断点
- 响应式设计的Goldilocks方法
- 视口大小（数百种设备和视口大小的列表）
- 标准设备的媒体查询（针对流行设备的媒体查询列表）
这就是我用的...
@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}
适当时还有其他各种类型（最小宽度不带最大宽度或最大宽度不带最小宽度），但这是我的基本设置。
就我个人而言，我从来不了解许多人使用的奇怪宽度。 例如，320及更高版本具有五个CSS3媒体查询增量：480、600、768、992和1382px。
这对我来说毫无意义。 逻辑中断间隔为320px（320、640、960、1280、1600、1920）。 请注意，这些中断可以使任何方向上的几乎所有设备的布局略有不同（全向是240x400，iphone是320x480，droid x是480x858，ipad是768x1024，galaxy s3是720x1280，并且它们正在使用1920x1080平板电脑）。
J
要寻找的一些解决方案：
iphone屏幕（许多其他智能手机的屏幕尺寸类似： 326 x ppi时的960 x 640像素分辨率 [http://www.apple.com/iphone/specs.html]
ipad屏幕（许多其他平板电脑的屏幕尺寸相似 1024 x 768像素分辨率，每英寸132像素（ppi） [http://www.apple.com/ipad/specs/]
“正常”屏幕 许多普通的屏幕还具有1024 x 768像素的分辨率，根据： [http://www.w3schools.com/browsers/browsers_display.asp]但我不担保他们 值得信赖。
我现在正在寻找更多数据。