gpt4 book ai didi

Resizing of div based on the width of the screen(根据屏幕宽度调整div的大小)

翻译 作者:bug小助手 更新时间:2023-10-26 22:27:40 24 4
gpt4 key购买 nike



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>




更多回答

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com