我怎样才能像桌面一样移动？

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

在浏览器中预览时按 crtl/comand shift strong textM，然后它会显示它在手机上的显示方式。希望我好好回答你。

Answer 2

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

Answer 3

<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 4

简单，修复边距！

<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 5

你只需要将位置改为相对

<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>

我怎样才能像桌面一样移动？

How can I show as mobile as desktop?

html

css

division