我可能会有一个最大宽度(不全面流体)我认为我会有大约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)。这在哪里发挥作用，我应该如何处理这些情况？
解决方法
>数以千计的不同设备上有数百种不同的屏幕尺寸。
>未来将带来新的屏幕尺寸。
>苹果，三星，微软，LG，诺基亚和任何其他设备制造商可以随时更改其热门型号的屏幕尺寸。
有了这么多的视口可能性，匹配断点到特定的设备听起来不像一个有效的策略。只要跟上什么是流行，什么是新的，什么变化将是一个永无止境的任务。
通过这种方法，您的网站使用其自然断点来适应所有视口大小，而不是针对当前常见屏幕尺寸的人工断点。
这种方法如此简单和容易，可能很难相信：
>在台式机或笔记本电脑上运行您的网站。
>在缩小浏览器窗口时，请注意网站的响应方式。
>当你到达你的布局不再完美的点，这是你的第一个断点。
>调整您的网站的屏幕尺寸(这可能与任何设备没有任何关系)。
>继续缩小浏览器窗口。
>当你点击下一个布局问题，这是你的第二个断点。
> …等等。
当然，如果你设计的移动先行，那么过程反过来：开始一个狭窄的屏幕，工作出路。
使用自然断点，您不再需要专注于一个巨大的视口大小，因为您的网站将适应任何设备，无论现在还是将来。
根据one developer，这种方法使断点全环到他们的初衷：
I’m not sure how we ever came up with the phrase “device-specific
breakpoints” anyhow… As I’ve understood it,the term “breakpoint”
was always a reference to where the content or layout would “break”
(i.e. appear flawed) and thus you’d need to apply a media query at
that point. But I guess that’s just semantics,I just always thought
it was common sense to refer to breakpoints in the context of content
or layout.~ Louis Lazaris,07001
source:
07002
更多信息(外部网站)：
> Why You Don’t Need Device Specific Breakpoints
> Setting Breakpoints in Responsive Design
> Google Developers: How to choose breakpoints
> The Goldilocks Approach to Responsive Design
> Viewport Sizes(一个包含数百个设备和视口大小的列表)
> Media Queries for Standard Devices(针对热门设备的媒体查询列表)
