只用这3个CSS断点，就能搞定95%的响应式布局

正文

请到「今天看啥」查看全文

核心问题：过多的断点带来的收益微乎其微

相信你一定经历过这种情况：你启动项目，安装了Tailwind或者自定义了一堆媒体查询，然后……

等你好不容易搞定了这些断点，网站设计早就过时了。

• 你企图适配每种边缘情况，最终却陷入了维护的泥潭。
• 可悲的是，你的用户其实并不关心这些。

他们只想在自己的手机、平板和笔记本电脑上，看到网站正常工作。

---

能搞定95%布局需求的3个断点

如果你想要一种实用、可预测、经得起时间考验的断点设置，从这里开始：

/* 手机屏幕，默认样式，小于768px无需额外媒体查询 */
@media (min-width: 768px) { /* 平板设备布局 */ }
@media (min-width: 1024px) { /* 桌面端设备布局 */ }

就是这么简单。

请到「今天看啥」查看全文