如何显示与台式机一样的移动性？

Question

我创建了一个div，用于在图像上放置文本。

此处是代码：

<div style="text-align:center;position:absolute;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>

移动设备： 太完美了。

此处台式机： 它不会像在移动设备上那样充满正方形。

我该如何解决？ 谢谢！

Answer 1

在浏览器中预览时按ctrl / command shift M ，然后它将显示您的网站在移动设备上的显示方式，您也可以将移动设备调整为平板电脑大小。 希望我回答得很好。

Answer 2

<style type="text/css">
.wrapper{
    background-color: red;
    margin: auto;
    width: 23%;
    text-align: center;
    padding: 4px 1px;   
}

<div class="wrapper">
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>

我认为您也需要检查媒体查询https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

轻松，固定边距！

<div style="text-align:center;position:absolute;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="margin: 0 0 15% 0;font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="margin: 0 0 15% 0;font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="margin: 0 0 15% 0;font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="margin: 0 0 15% 0;font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>

Answer 4

您只需要将位置更改为相对位置

<div style="text-align:center;position:relative;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>