如何在浏览器窗口缩小时仍保持页面优雅显示

如题，这个问题我从未考虑过。一是因为我认为我们本来就应该用最大化或者接近于屏幕宽度的浏览器窗口来看网页，二是因为觉得这样考虑很难处理——我的版心宽度是1200px，窗口宽度如果大于1200，则主要内容居中显示，两端空白，小于1200怎么办，这个宽度根本就hold不住版心啊，难不成内容也要同步缩小吗，就算可以同步缩小，那么缩小后能看吗，缩小到什么时候是个头这些都是问题。

但是这个问题昨天我确确实实要面对了，因为我之前做了个banner动画，重点是，这是个全屏的banner，并不只是活跃于版心这一块，设计稿的宽度是1920的，为了让它在1920以下宽度的屏幕正常显示，我已经做了媒体查询，对应做了比例的缩小和定位的调整。实现了在1300多宽度的屏幕到1920宽度的屏幕都可以看到比较正常的效果。然后客户说不满意，因为把浏览器窗口的宽度缩小后出现了层叠，画面惨不忍睹。

大概是这样的效果：

（因为左边的圆盘靠左，右边的字靠右，所以我分别用了left和right来定位，屏幕宽度不够的时候banner区域宽度也不够了，所以发生了层叠；另一个原因是，在我媒体查询无法干涉到的宽度范围，这些东西并没有缩小，这样大小就显得非常大）

我第一反应是继续做媒体查询，适配更小的屏幕宽度，然后缩小得更小一些。本来写的最小宽度是1300，然后写到了1200。结果写完我继续缩小浏览器宽度，小于1200的又回到了原来的大小……所以要到哪里才是个头啊。

我感觉很沮丧，因为我自己也会经常拖拉浏览器宽度，感觉确实会有这样的使用场景，可是继续挤压下去，别说全屏的banner出现了异常，版心的地位也受到了挤压，里面的内容也没办法正常显示了。

这个时候我去参考了两个别人做的网站首页的缩放效果，我惊奇地发现，在浏览器宽度缩小到明显小于1200后，浏览器出现了左右滚动条，内容并没有缩小，仍然倔强地保持了版心区域的正常显示。所以我决定也这样改——在宽度为1200以上到1920的之间时，根据屏幕宽度缩放banner区域的大小；在宽度更小的时候保持最小的缩放比例，同时保证主要部分的宽度不能低于版心的宽度。

也就是说，要做以下几件事情来修改：

1. 让html和body的最小宽度为1200px。这样在浏览器宽度缩小后，仍然能正常显示版心里的内容。

2. 让html的overflow-x为auto。这样，在浏览器宽度大于1200的时候不出现横向滚动条，在宽度小于1200的时候出现横向滚动条（虽然丑，但是仍然可以看到屏幕完整的内容）。我之前的习惯就是把overflow-x直接hidden掉，这样反而不够灵活。

3. 头部（fixed固定定位的头部并不能左右滚动）在浏览器窗口宽度过小的时候，可以做一点小小的修改——在屏幕宽度继续缩小的时候，可以去掉顶部导航按钮的显示，只保留少数东西的显示（如logo和一些比较重要的按钮），这样可以避免因为导航栏宽度不够而让内容掉下来的尴尬

4. 如果底部footer是内容是紧紧贴着版心两边显示的，在html宽度恰好为版心宽度的时候会贴边。这个问题我用margin，padding，translateX试过了，都不满意，最后我想到一个办法，让html和body的最小宽度略大于1200px，这样看起来会舒服一些。

我做了以上这些修改后，效果如下：

（窗口最大化的时候，我的屏幕分辨率是1366*768）

浏览器窗口宽度缩小后，头部只能看到logo和登录按钮，显得干净。banner缩小了，但没有无底线地缩小，没有发生层叠，出现了横向滚动条。

footer两边的内容也没有发生贴边。

这就是我的一点小发现。希望能帮助到遇到同样问题的朋友们