Question

编辑：我添加了一个小提琴https://jsfiddle.net/ocruzwrt/ 基本上绿色方块必须保持垂直居中而不改变html ..

我正在开展一个项目，基本上是一个旧网站，必须适应移动设备。当然很多事情需要从头开始写，但我不能这样做，我没有足够的时间。

因此，我面临一个巨大的问题，即垂直对齐图标菜单，该菜单设计为带有精灵背景的空div，而容器的高度通常较小。

不幸的是，我出于各种原因无法使用这些：

flexbox
显示表
绝对定位

我得到了那个解决方案..它或多或少地保持图标始终垂直居中:(请注意它写在LESS中）

    @media only screen and (max-width: 600px) {
        #menu-mobile-top {#menu-mobile-btn {margin-top: 2.5%}}
}
    @media only screen and (max-width: 500px) {
        #menu-mobile-top {#menu-mobile-btn {margin-top: 2%}}
}
    @media only screen and (max-width: 400px) {
        #menu-mobile-top {#menu-mobile-btn {margin-top: 1%}}
}
    @media only screen and (max-width: 350px) {
        #menu-mobile-top {#menu-mobile-btn {margin-top: 0%}}
}

但它的写得很糟糕。有没有办法写得更好？理想情况下，我从600开始的2.5％到350的0％结束。

Answer 1

如果你用css写的，你是对的：写的很糟糕。这已得到纠正：

@media only screen and (max-width: {
    600px) {
        #menu-mobile-top > #menu-mobile-btn;
    }
    500px) {
        #menu-mobile-top > #menu-mobile-btn;
    }
    400px) {
        #menu-mobile-top > #menu-mobile-btn;
    }
    350px) {
        #menu-mobile-top > #menu-mobile-btn;
    }
}

Answer 2

喜欢这个吗？

https://jsfiddle.net/j3u5282d/

.spacer {
    width: 100%;
    padding-bottom: 5%; /* speed of expanding */
}

CSS动态保证金？

2 个答案: