时间戳

首页 > 解决方案 > 使用窗口调整大小调整按钮大小

css - 使用窗口调整大小调整按钮大小

问题描述

我制作了两排按钮（带有字母 AZ）。按钮和行的 CSS 代码是：

.buttons{
  display: flex;
  background-color: #009999;
  border: none;
  border-radius: 0.3em;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  
  width: 2em;
  height: 2em;
  font-size: 1.6em;
  padding: 0.2em ;
  margin: 0.1em;
  
  text-align: center;
  font-weight: bold;
 
} 
.firstRow, .secondRow {
  display: flex;
  flex-direction:  row;
  align-items: center;
  padding: 0.2rem;
  list-style-type: none;
  width: 90%;
}

当我调整窗口大小时，我希望这些按钮也根据窗口的大小调整大小。我的问题是，当我减小窗口大小时，字母保持相同大小，并且它们并未全部显示在屏幕上。

标签： cssresize

解决方案

尝试使用vw(viewport)而不是em

 .buttons{
     display: flex;
     background-color: #009999;
     border: none;
     border-radius: 0.3em;
     color: white;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     cursor: pointer;
     width: 5vw;
     height: 5vw;
     font-size: 1.5vw;
     padding: 2%;
     margin: 1%;
     text-align: center;
     font-weight: bold;
}
 .firstRow, .secondRow {
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 0.2rem;
     list-style-type: none;
     width: 90%;
}

推荐阅读