如何实现网站在不同大小屏幕下的UI适配？

刚研究了下，分享一下自己的经验：

1. 如果是用现成的组件库，记得把xx-layout-content（仅举例说明）的内部间距设为0，这样在移动端上，内容会紧贴屏幕边界，更美观。
2. 在分栏布局中，一定要把xs、sm、md、lg这种属性设置完整，这样在改变屏幕宽度时页面会变化得更流畅。粒度越细变化越流畅，很好理解。
3. 把主内容区的最大宽度（max-width）设置为固定值（例如1200px）比设置为比例值（例如75%）更好，因为设置为固定值的话，缩小屏幕宽度时会先缩小主内容区与外部容器的间距，间距缩不动了再缩小主内容区；设置为比例值的话，缩小屏幕宽度时主内容区会立刻随之缩小，导致主内容区变得“瘦长”。

技术论坛被人工智能替代得太狠了

用 tailwindcss，比如

<div class="p-4 sm:p-6"></div>

可以让移动端的 padding 为 16px，更大的屏幕为 24px。背后原理是 media query。

Using media queries