CSS - 如何在缩小时增加边距，放大时减少边距答案

【问题标题】：CSS - How to make a side bar w/ increasing margin when you zoom out, decreasing when you zoom inCSS - 如何在缩小时增加边距，放大时减少边距
【发布时间】：2022-01-25 07:29:16
【问题描述】：

我正在制作一个带有按钮等的侧边栏，另一侧带有文本。初次打开页面时，侧边栏会占据左侧的 39%，目前运行良好。放大时，侧边栏应缩短（宽度减小），而缩小时侧边栏应变宽（宽度增加）。问题是当您从使用浏览器加载的原始位置放大时，侧栏会向右移动太多。同样，如果您缩小，侧边栏会向左移动太多。

换句话说，我需要侧边栏保留其原始视图，即：（查看它的外观）

当你放大或缩小时，它应该保持这个原始比例。相反，当您缩小时，它会执行以下操作：（缩小后查看）

当你放大它时：（放大后查看）

所以为了解决这个问题，我需要一些代码，当你缩小时会增加边距大小，当你放大时会减小它。

对不起，如果这看起来很愚蠢。提前谢谢！

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.sidenav {
  height: 100%;
  width: 39%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #F4F4F4;
  overflow-x: hidden;
  display: inline-block;
}


</style>
</head>
<body>

<div class="sidenav">
</div>

</body>
</html>

【问题讨论】：

侧边栏很好用，如果您希望字体始终相等，请使用类似vw example: font-size: 3vw;如果缩放，字体总是具有相同的大小，并且如果宽度很大，它也会很大（如果缩放它总是相等）......唯一的问题是：如果屏幕的宽度太小字体也会很小这个问题的解决方案可能是使用@media查询，并检查屏幕的宽度是否小于这个设置font-sizewith一个px值，否则它将执行你之前写的正常css

标签： html css resize

【解决方案1】：

我似乎找到了解决我自己问题的方法：

<html>
    <style>
* { margin:0; padding:0; box-sizing:border-box; }
#container {
    margin: 0;
    overflow: hidden;
    background: #FFFFFF;
    padding:0;
}
#left {
    float: left;
    width: 51%;
    position: relative;
    left: -295px;
    padding:0;
}
#left2 {
    height: 240px;
    margin: 0;
    background: #F4F4F4;
    padding:0;
}

</style>

<div id="container">
    <div id="left"><div id="left2"></div></div>
</div>
</html>

【讨论】：