常见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){ ... }