1. 犀牛前端部落首页
  2. CSS教程

CSS响应式设计常见断点设置

CSS响应式设计常见断点设置

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

在设计网站时,俺注意到俺使用了一些漂亮的随机值作为CSS断点。有时是四舍五入的值,如800或1200,有时是特定的像素值,如672。

俺搜索了今后应用于断点的适当值。

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

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

  • 小于640px
  • > 640px
  • > 768px
  • > 1024px
  • > 1280 px

我不是一名设计师,所以我不会每天参与最佳实践,但这次我决定先设计手机。

这意味着我的CSS,在没有任何媒体查询的情况下,将为移动肖像设计用例,然后添加断点,我将为越来越大的设备设计,禁止媒体查询的最大宽度。

我想我一直走的是相反的路线:为大屏幕设计,这是我最常用的,然后变小,但设计移动优先和使用最小宽度似乎是目前最被接受和使用的解决方案。

以下是俺经常使用的媒体查询:

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4531.html

发表评论

登录后才能评论