我在项目中使用的最佳CSS断点值
在设计一个网站时，我注意到我的CSS断点使用了一些相当随机的数值。有时是一个四舍五入的值，如800或1200，有时是一个具体的值，如672，一直到像素。
我在寻找适当的数值，以便在今后的断点中使用。
我有一点时间来研究这个问题，然后我得出了这个结论。
我们有5种主要的设备尺寸需要担心。
- 移动纵向
- 手机横向
- 平板电脑纵向
- 平板电脑横向
- 笔记本电脑
这些设备映射到这些像素值。
- 手机纵向：小于640px
- 手机横向：> 640px
- 平板电脑纵向：> 768px
- 平板电脑横向：> 1024px
- 笔记本电脑：>1280px
我不是一个设计师，所以我没有每天参与最佳实践，但我这次决定先设计移动端。
这意味着我的CSS，在没有任何媒体查询的情况下，要为移动端的纵向用例进行设计，然后添加断点，我将为越来越大的设备进行设计，禁止媒体查询的max-width 。
我想我总是走相反的路线：为更大的屏幕设计，这是我最常用的，然后再去做更小的，但现在设计移动优先和使用min-width 似乎是最被接受和使用的解决方案。
这些是我从现在开始要使用的媒体查询。
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}
