Css 缩小浏览器收缩时图标之间的间距

我正在尝试使用flex box设计导航条。我有三个

div

，每当浏览器收缩时，我都想减小

header\u center

类中图标之间的间距

*{
保证金：0；
填充：0；
}
.标题{
显示器：flex；
证明内容：之间的空间；
弯曲方向：行；
填充：15px 20px；
}
.标题\uuuu左>img{
高度：40px；
}
.收割台中心{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.header\u选项{
显示器：flex；
对齐项目：居中；
填充：0 30px；
光标：指针；
}
.header_u_右{
显示器：flex；
}
.header\u\u信息{
显示器：flex；
对齐项目：居中；
右侧填充：12px；
}
.header\uu info>span{
左边距：10px；
}

阿卡什

以

vw

而不是

px

为单位测量您的

padding

属性

---

这表示视口/窗口/选项卡宽度的一小部分。

使用

vw

而不是

px

进行填充。vw代表视图宽度，它是根据屏幕宽度测量的，因此它将自动调整。在您的情况下，尝试使用2vw而不是30像素左右的填充效果……但这是最合适的方法吗？是的，如果您希望大小是动态的，请使用百分比或vw而不是像素。您也可以尝试使用vmin或vmax：