I have the following code. Why is the size of the div not adjusting when I reduce the width of the screen? What I'm trying to achieve is, that the size of the div has to reduce proportionally when the width of the screen is reduced so that the div doesn't look gigantic. I tried converting the width and height to vh and percentages but it's not working
我有以下代码。为什么当我缩小屏幕宽度时,div的大小没有调整?我试图实现的是,当屏幕宽度减小时,div的大小必须按比例减小,这样div看起来就不会太大。我试着将宽度和高度转换为VH和百分比,但不起作用
.sign_logo {
position: absolute;
top: 6.2rem;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(200, 0, 50);
justify-content: center;
align-items: center;
padding: 5%;
width: 12rem;
height: 12rem;
border-radius: 50%;
}
<div class="sign_logo">
<a>Register</a>
</div>
更多回答
“I tried converting width and height to vh….” did you mean this? vh is viewport height unit. Did you use vw for the width unit?
“我尝试将宽度和高度转换为VH…“你是认真的吗?VH是视区高度单位。您是否使用VW作为宽度单位?
优秀答案推荐
For what you intend to do, you are using the wrong kind of units: Use vw
and vh
instead of rem
, those are relative to width and height of the viewport.
对于您要执行的操作,您使用了错误的单位类型:使用vw和vh而不是rem,它们与视区的宽度和高度相关。
And add display: flex;
to center the content in your div, otherwise justify-content: center;
and align-items: center;
won't have any effect.
并添加Display:flex;以使div中的内容居中,否则-Content:Center;和Align-Items:Center;不会有任何效果。
.sign_logo {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
background-color: rgb(200, 0, 50);
display: flex;
justify-content: center;
align-items: center;
padding: 5vw;
width: 25vw;
height: 25vw;
border-radius: 50%;
}
<div class="sign_logo">
<a>Register</a>
</div>
更多回答
我是一名优秀的程序员,十分优秀!