css - 响应式网站设计的尺寸

Question

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

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

移动版 EX：

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

    } 

EX 平板电脑：

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

    } 

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

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

Answer 1

/* #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) { ... }

有关实际设备规格，请通过 CSS-tricks查看此链接..

Answer 2

这是媒体断点的完整列表

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

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

我希望它会有所帮助。