（点根烟）妈的，看到这问题我就PTSD，想起几年前哪个‘大神’信誓旦旦跟我说‘就设960px，黄金比例，适配所有浏览器’，我特么真信了，结果呢？结果就是移动端流量起来那阵子，我的站打开像个傻逼——左边一大片空白，右边内容挤成一坨，用户滑动都要用放大镜！最骚的是Google的移动端友好测试工具直接给我标红，蜘蛛过来逛一圈估计都嫌窄，扭头就走，收录？排名？想屁吃。
你就记住一句话：现在没有固定答案，只有固定思路。别再纠结具体多少像素了！你得先想你的用户用什么看？手机？平板？还是27寸大显示器？我后来才搞明白，那叫‘视口’（viewport），你得用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这玩意儿告诉浏览器‘按设备宽度来’，这是保命底裤，不写这个后面全白搭。
然后就是CSS布局，什么px、%、rem、vw/vh，选哪个？我血的教训是：关键容器用百分比或者max-width，字体和边距用rem。当初我用px写死了所有间距，美工图是1:1还原了，换个屏幕就全崩。后来改用rem，根字体大小设成62.5%（方便计算），整个站像有了弹性，舒服多了。特别是那种大屏广告位，你设个width: 100%; max-width: 1200px;，它在大屏上不会无限拉宽变成搞笑条幅，在小屏上又能自动缩回去，懂我意思吗？
还有更坑的，第三方组件！我用了某个现成的轮播图插件，丫内部宽度写的死值800px，我在调试工具里把媒体查询、弹性布局全调好了，一发布，那个轮播图在手机上还是倔强地撑出屏幕，像个肿瘤！排查到凌晨四点，最后发现是这玩意儿。真服了。
所以，现在谁再问我‘网站宽度设多少’，我只会甩给他两句话：1. 先去用Chrome开发者工具的响应式模式，把你的设计稿在手机、平板、电脑视图下都拖一遍，看看会不会裂开。 2. 别偷懒，好好学CSS Grid和Flexbox，或者直接用Bootstrap/Tailwind这类框架，人家早就把坑填平了。 省下来的时间，去搞内容，比纠结这1个像素值钱多了。真的，听劝。
（烟掐了）哦对了，如果你在做后台管理系统或者那种对桌面端有强需求的工具站，那当我没说，固定宽度+水平滚动条，也是一种‘纯粹’……（苦笑）
