为响应式设计编写代码时，智能手机和平板电脑的标准宽度是多少。我查看了不同的网站，但似乎没有找到任何标准宽度的好模板。在编写响应式设计时，你们通常对断点/媒体查询做什么？
如果有人有平板电脑/智能手机等不同结果的好模板，请分享！谢谢！
【问题讨论】：
Instead of being concerned with device breakpoints the best practice is to design for your smallest viewport first. As you expand that view there will come a point at which the design looks terrible. This is where you add a break point.
有两种方式来思考您的 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){...}
如果您真的想深入了解细节并利用 Retina 显示屏，您将不得不玩弄像素比率。看看这个过度杀伤的 css 样式表：media-queries-boilerplate.css。使用视网膜显示器的好处之一是为客户提供更高质量的图像。缺点是它需要更多带宽并使网站变慢。
希望对你有所帮助。
【讨论】：
在编写响应式设计元素时，我总是使用百分比 - 避免使用设备驱动的断点，正如 Skube 在他们对您的问题的评论中所说的那样。
【讨论】：