用于响应设计的通用BreakPoints

Question

实现网页响应布局的常见断点是什么？

我基本上是用

@media screen and (max-width: 480px) {
}

@media screen and (min-resolution: 150dpi) {
}

@media screen and (max-resolution: 300dpi) {
}

@media screen and (min-width: 150px) {
}

@media screen and (min-height: 100px){
}

@media screen and (max-height: 450px) {
}

我正在使用上述断点，但无法实现完整的响应布局

Answer 1

主要断点

作为一名开发人员，我们需要使设计适应三种类型的设备(移动设备、平板电脑和桌面设备)。您应该使用至少3个断点，以获得最大的设备灵活性。以下是一些主要的断点

我经常使用的断点：

0 -600 Phone：电话

600 -900 600：平板肖像

900 -1200 900：平板电脑景观

1200 - 1800是我们正常样式应用的地方。

1800 Big + :大桌面

访问统计，以下是6种最常见的屏幕大小

Answer 2

这取决于你和你的网站的使用。今天设计的大多数网站都采用移动第一的方式。断点可以与引导使用相同。

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }