常见CSS媒体查询断点

Question

我正在使用CSS媒体查询在响应式网站上工作。

以下是设备的良好组织吗？手机，Ipad（横向和纵向），台式机和笔记本电脑，大屏幕

常见的媒体查询断点值是什么？

我打算使用以下断点：

• 320：智能手机肖像

• 481：智能手机景观

• 641或768 ???：iPad纵向???

• 961：iPad景观/小型笔记本电脑???

• 1025年：台式机和笔记本电脑

• 1281：宽屏

你怎么看？我有一些疑问？点。

Answer 1

与其尝试将@media规则定位到特定设备，不如说将它们基于您的特定布局更为实用。也就是说，逐渐缩小桌面浏览器窗口的范围，并观察内容的自然断点。每个站点都不同。只要设计在每个浏览器宽度上都能很好地流动，它就应该在任何屏幕尺寸上都非常可靠地工作（并且有很多这样的屏幕。）

Answer 2

我一直在使用：@media only screen and (min-width: 768px) {    /* tablets and desktop */}@media only screen and (max-width: 767px) {    /* phones */}@media only screen and (max-width: 767px) and (orientation: portrait) {    /* portrait phones */}它使事情相对简单，并允许您在纵向模式下为手机做一些不同的事情（很多时候我发现自己不得不为它们更改各种元素）。

Answer 3

我正在使用4个断点，但正如ralph.m所说，每个站点都是唯一的。你应该尝试一下。由于设备，屏幕和分辨率众多，因此没有神奇的断点。这是我用作模板的内容。我正在检查网站上不同移动设备上的每个断点，并为每个元素（ul，div等）更新CSS，但该断点无法正确显示。到目前为止，我正在制作多个响应式网站。/* SMARTPHONES PORTRAIT */@media only screen and (min-width: 300px) {}/* SMARTPHONES LANDSCAPE */@media only screen and (min-width: 480px) {}/* TABLETS PORTRAIT */@media only screen and (min-width: 768px) {}/* TABLET LANDSCAPE / DESKTOP */@media only screen and (min-width: 1024px) {}    更新截至2015年9月，我正在使用更好的产品。我发现这些媒体查询断点与更多设备和桌面屏幕分辨率匹配。将所有用于桌面的CSS放在style.css上响应.css上的所有媒体查询：响应菜单的所有CSS +媒体断点@media only screen and (min-width: 320px) and (max-width: 479px){ ... }@media only screen and (min-width: 480px) and (max-width: 767px){ ... }@media only screen and (min-width: 768px) and (max-width: 991px){ ... }@media only screen and (min-width: 992px){ ... }