响应式设计的良好CSS断点值是多少?

我在项目中使用的最佳CSS断点值

在设计站点时,我注意到我为CSS断点使用了一些非常随机的值。有时会四舍五入,例如800或1200,有时是直到像素的特定值,例如672。

我搜索了适用于以后的断点的适当值。

我花了一点时间查一下,得出了这个结论。

我们有5种主要的设备尺寸需要担心:

  • 手机人像
  • 移动景观
  • 平板电脑肖像
  • 平板电脑风景
  • 笔记本电脑

这些设备映射到这些像素值:

  • 移动人像:小于640像素
  • 移动景观:> 640px
  • 平板电脑肖像:> 768像素
  • 平板电脑横向:> 1024px
  • 笔记本电脑:> 1280像素

我从尾风默认

我不是设计师,因此我每天都不会参与最佳实践,但是我决定这次是首先设计移动设备。

这意味着我的CSS(无需任何媒体查询)将针对移动肖像用例进行设计,然后添加我将为越来越大的设备设计的断点,从而禁止max-width来自媒体查询。

我想我总是走相反的路线:设计更大的屏幕(这是我最常使用的屏幕),然后再缩小屏幕,但首先设计移动设备并使用min-width似乎是当今最被接受和使用的解决方案。

这些是我从现在开始将使用的媒体查询:

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

免费下载我的CSS手册


更多CSS教程: