响应式设计 - 智能手机和平板电脑的标准断点/媒体查询

Question

编码响应式设计时，智能手机和平板电脑的标准宽度是多少？我查看了不同的网站，但我似乎没有找到任何标准宽度的好模板。在编写响应式设计时，你们通常会为断点/媒体查询做些什么？

如果有人有平板电脑/智能手机等不同结果的好模板，请分享！谢谢！

Answer 1

有两种方法可以考虑CSS媒体查询。

首先是'桌面优先'。这意味着您的基本CSS将瞄准大屏幕，然后您的媒体查询将覆盖您的类以适应较小的类。你的CSS可以这样：

/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

第二种方法是“移动优先”。这意味着您的基本CSS将针对像iPhone 4这样的小屏幕。然后您的媒体查询将覆盖您的类以适应更大的屏幕。以下是示例：

/* Smartphones (portrait) ----------- */

/* Ipad2 (portrait) ----------- */
@media only screen and (min-width : 768px){...}

/* Ipad2 (paysage) ----------- */
@media only screen and (min-width : 1024px){...}

/* Ordi (Petit) ----------- */
@media only screen and (min-width : 1224px){...}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1824px){...}

如果您真的想了解细节并利用视网膜显示器，您必须使用像素比率。看一下这个矫枉过正的CSS样式表：media-queries-boilerplate.css。视网膜显示器的一个好处是为客户提供更高质量的图像。它的缺点是需要更多的带宽并使网站变慢。

我希望这对你有所帮助。

Answer 2

我在编写响应式设计元素时总是使用百分比 - 避免使用设备驱动的断点，就像Skube在你的问题评论中所述。