响应式网站设计的尺寸

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

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

我希望这会有所帮助。