CSS适配多分辨率的情况 —— 【我在加班写前端】

前言

最近公司前端一直空缺，但项目还是得继续推进，没办法，我被顶包做了两天前端的工作。

可能在前端的心里，写页面比较简单，但对于我这一个半吊子的前端来说，是有些难点的。

碰到了非普通盒子布局的页面，就是内容溢出了盒子。还有菱形方块布局。这些都是之前没有想过的。

也接触了 flex 布局，以及 box-sizing 属性。菱形方块元素布局主要是通过 translate 实现。

这些以后再说，这次先聊多分辨率适配的问题。

问题

碰到一个按钮组相对于 banner 进行定位的情况，就是按钮得在 banner 内容的某一块上，不能覆盖内容或者离开特定的区域。

按钮组本身是我自己合的，要实现类似 switch 的效果的两个按钮组成的按钮组。实际效果如下：

这个按钮组合我是这样搞的：父级相对定位，左边短按钮，右边长按钮。两个按钮绝对定位，调整连个按钮重合在一起，左边按钮文字居中，右侧靠右然后通过调整内距实现右侧按钮居中效果。并且如果左侧按钮被覆盖，可以设置 z-index 使其上浮展示。

按钮得在 banner 图上，且在图上文字的正下面，通过调整按钮组合的 top 和 left 实现。但是因为 banner 宽度设成了 100%，这样高度就会随着视口的宽度变化和变化。那么按钮组合的位置也会变动，甚至从 banner 区域消失。

解决方案

通过 media screen 匹配不同的宽度区间，分别设置样式。

看到之前的小伙伴已经做了两组适配

@media only screen and (min-width: 1600px) {
...
}

@media screen and (width:1920px){
...
}

之前在 bootstrap 源码中又看到类似的代码，主要功能是解决不通屏幕的适配问题的。大概意思也能看得懂，上面是屏幕宽度最小 1600px，下面是屏幕宽度等于 1920px。因为放在正常样式下面，所以如果条件符合，就能够覆盖基本样式，实现动态适配的效果。

因为按钮组合比较大，所以屏幕宽度的区间要设置的多一些，如 (min-width: 1920px)， (min-width:1600px) and (max-width:1920px)。虽然在几个主要的区间里显示还好，但是随着视口宽度的变化，效果还是不够理想。主要因为没有设置按钮，按钮一直保持那么大，分辨率较低的情况下，很容易溢出或覆盖文字。

但总体效果还是实现了的，先这样吧，之后有更好的方案再替换。