响应式网站设计的尺寸答案

【问题标题】：Sizes for Responsive website Design响应式网站设计的尺寸
【发布时间】：2013-08-28 06:12:01
【问题描述】：

我想设计一个网站。但请告诉我我可以使用哪些尺寸来进行响应式网站设计。该尺寸必须包含用于移动设备、平板电脑、个人电脑和其他设备..

我想在媒体查询中使用它们.. :D

移动版 EX：

    @media only screen and (min-width: 500px) {

    }

平板电脑的EX：

    @media only screen and (min-width: 800px) {

    }

给我一些关于响应式网站设计的资源以及我可以用于响应式网站设计的尺寸.. :D

我想知道我可以使用的这些设备的实际尺寸是多少。 :D

【问题讨论】：

标签： css responsive-design media-queries viewport

【解决方案1】：

这里是媒体断点的完整列表

@media all and (max-width: 1690px) { ...}
@media all and (max-width: 1280px) { ...}
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }

查看有关响应式设备尺寸的更多信息：Medium

希望对你有帮助。

【讨论】：

【解决方案2】：

/* #1- Desktops */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and netbooks */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

有关实际设备规格，请查看this link by CSS-tricks..

【讨论】：