CSS 根据屏幕大小将边距缩小为零答案

【问题标题】：CSS scale margin down to zero based on screen sizeCSS 根据屏幕大小将边距缩小为零
【发布时间】：2021-01-25 02:28:46
【问题描述】：

我可以使用 vw 或 % 单位根据屏幕大小缩放网站的边距。但是，我希望它以更大的速率缩放，视口越小。因此，当浏览器窗口填满一个完整的 1920x1080 显示器时，可能会有 10% 的边距，但我希望在 Android 手机等移动设备上显示时，边距为 0%。

我可以使用下面的 css 实现边距的突然变化，但我怎样才能使它平滑地缩小边距？

.my-class{
    margin: 0 10%;
}

@media all and (max-width: 500px) {
    .my-class{
        margin: 0 0%;
    }
}

【问题讨论】：

标签： css responsive-design margin

【解决方案1】：

您可以使用calc() 函数根据视图宽度计算边距。您正在寻找的功能是：

margin: 0 calc(100vw * 0.1352 - 67.6051px);

我使用数学方程获得了函数，以找到给定 2 个点的直线方程 (reference)。两点分别是(1920, 192)（192为10%）和(500, 0)

【讨论】：

【解决方案2】：

你可以给它添加过渡属性，它会起作用的

.my-class{
    margin: 0 10%;
    transition: .3s ease-in-out;
}

【讨论】：

【解决方案3】：

您是否尝试过使用过渡属性？它提供了 css 状态之间的动画，并且还应该在切换媒体时提供 css 动画。尽管不使用开发屏幕的任何人都不太可能观察到这一点。

 .my-class{
margin: 0 10%;
transition: all ease 500ms;
}

@media all and (max-width: 500px) {
    .my-class{
        margin: 0 0%;
        transition: all ease 500ms;
    }
}

【讨论】：