html 设置 断点,css – 响应式网站上媒体查询的常见断点

在决定媒体查询的断点时，请考虑以下实际情况：

>数以千计的不同设备上有数百种不同的屏幕尺寸。

>未来将带来新的屏幕尺寸。

>苹果，三星，微软，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

更多信息(外部网站)：