在响应式网站上进行媒体查询的常见断点
所以我正在开发我的第一个响应式网站，这个网站广泛使用了媒体查询。 我想知道是否有一些我应该优化的常见页面宽度。
我可能会有一个最大宽度（不stream畅）我想我可能有3-5个设置宽度与他们之间有趣的小CSS3转换（类似于CSS技巧如何工作）。
目前我使用的数字有些随意：
@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 ）。 这起到了什么作用，我应该如何处理这些情况呢？
在为媒体查询决定断点时，请考虑以下几点：
- 成千上万种不同的设备有数百种不同的屏幕尺寸。
- 未来将带来新的屏幕尺寸。
- 苹果，三星，微软，LG，诺基亚以及任何其他设备制造商可以在任何时候改变其受欢迎机型的屏幕尺寸。
有了这么多的视口可能性，匹配断点到特定的设备听起来不是一个有效的策略。 只要跟上stream行，什么是新的，什么改变将是一个永无止境的任务。
更好的方法可能是根据内容和布局设置断点。
通过这种方法，您的网站使用自然断点来适应所有视口大小，而不是针对当前常见屏幕大小的人为断点。
这个方法非常简单，很容易相信：
- 在台式机或笔记本电脑上运行您的网站。
- 缩小浏览器窗口时，请注意网站的响应情况。
- 当你到达布局不再完美的地步时，这是你的第一个断点。
- 调整您的网站的屏幕尺寸（这可能与任何设备无关）。
- 继续缩小浏览器窗口。
- 当你遇到下一个布局问题时，那是你的第二个断点。
- … 等等等等。
当然，如果你devise的是移动优先，那么这个过程是相反的：从一个狭窄的屏幕开始，按照你的出路。
凭借自然的断点，您不再需要关注巨大的视域大小，因为您的网站将适应现在和将来的任何设备。
据一位开发人员介绍 ，这种方法将断点带回原来的意图：
我不确定我们是怎么想出“特定于设备的断点”这个短语的……我已经理解了，“断点”这个术语总是指向内容或者布局“破坏”的地方（即出现瑕疵），因此您需要在此时应用媒体查询。 但我想这只是语义，我一直认为在内容或布局的上下文中引用断点是常识。
〜Louis Lazaris， 令人印象深刻的网站
来源： https ： //responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450
更多信息（外部网站）：
- 为什么你不需要设备特定的断点
- 在响应式devise中设置断点
- Google Developers：如何select断点
- 响应式devise的金发姑娘方法
- 视口大小 （数百个设备和视口大小的列表）
- 标准设备的媒体查询（针对stream行设备的媒体查询列表）
- 这是一个非常有用的手机屏幕尺寸指南。
- 在屏幕分辨率统计的好指南
- 如果您有权访问Google Analytics（分析）关于解决scheme的数据，也可能会有价值。
另外，我肯定会推荐使用device-width来显示您的手机尺寸，除非您希望用户在非移动设备上调整浏览器窗口大小时看到自己的手机样式。 width是视口的宽度， device-width是device-width的当前分辨率。
另外，我想我已经读过一些移动设备不像预期的那样（使用@media）。
你是对的。 许多设备不会给你所期望的width或device-width ，特别是在横向和纵向之间切换时（纵向时它们通常会给出横向宽度）。 设备自动缩放也可能会引发一些问题。 使用视口元标记可以帮助解决这些问题。 （更多信息在这里）
这是我用的…
@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）。 请注意，这些rest可以给任何方向的几乎任何设备（omnia是240×400，iphone是320×480，droid x是480×858，ipad是768×1024，galaxy s3是720×1280，他们在谈论1920×1080片）略有不同的布局。
JJ
一些要寻找的决议：
iphone屏幕（许多其他智能手机有相似的屏幕尺寸：分辨率为960×640像素，分辨率为326 ppi http://www.apple.com/iphone/specs.html
iPad屏幕（很多其他平板电脑的屏幕尺寸相似，1024×768像素，每英寸132像素（ppi） 。http://www.apple.com/ipad/specs/
“正常”的屏幕很多正常的屏幕也有一个1024×768像素的分辨率，根据： http ： //www.w3schools.com/browsers/browsers_display.asp但我没有保证他们的可信度。
我正在寻找更多的数据。
