前言

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

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

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

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

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

问题

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

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

微信图片_20190524184449.png

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

按钮得在 banner 图上,且在图上文字的正下面,通过调整按钮组合的 topleft 实现。但是因为 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)。虽然在几个主要的区间里显示还好,但是随着视口宽度的变化,效果还是不够理想。主要因为没有设置按钮,按钮一直保持那么大,分辨率较低的情况下,很容易溢出或覆盖文字。

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