所以我创建了这个页面，但它在移动设备和 PC 上有不同的 View 。网站上的 View 如下
而在移动设备上， View 如下:
可以看出，在移动设备上，整个段落都向下移动了图片。我不明白为什么。网站上的所有内容都保持响应。这是此页面的代码:-
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
padding: 0;
}
.head{
height:200px;
width:100%;
border-top:3px solid purple;
overflow:hidden;
font-family:calibri;
}
.responsive {
width: 100%;
height: auto;
transition:2s;
position: relative;
filter: brightness(50%);
}
.responsive:hover{
transform:scale(1.4);
filter: brightness(80%);
}
@media only screen and (max-width: 401px) {
.below{
height:320px;
}
}
@media only screen and (max-width: 391px) {
.responsive {
height: 300px;
}
}
.centered {
position: absolute;
top: 83%;
margin-left:50%;
color:white;
text-shadow: 2px 2px 4px #000000;
transform: translate(-50%, -50%);
font-family:calibri;
}
.line {
position: absolute;
top: 95%;
margin-left:50%;
width:80%;
height:2px;
border-radius: 50px;
border:2px solid black;
background:white;
text-shadow: 4px 4px 4px #000000;
transform: translate(-50%, -50%);
}
.text{
position: absolute;
top: 100%;
font-family:calibri;
margin-left:50%;
margin-top:10%;
width:65%;
color: white;
text-shadow: 4px 4px 6px #000000;
transform: translate(-50%, -50%);
}
.textfont{
font-size:2.4vw;
}
.end{
margin:auto;width:160px;
}
.below{
float:left; width:100%; height:260px;border-bottom:2px solid purple;font-family:calibri;
}
</style>
<body>
<div class="head">
<div class="left">
<img src="logo.png" style="height:150px; width:150px;">
</div>
<div class="left1">
<h2 style="font-family:Bell MT"> INSTITUTE </h2>
<p> EDUCATION </p>
</div>
<div class="nav">
<ul style="list-style:none;">
<li><a href="#"><B>HOME</B></a></li>
<li><a href="mission.html"><B>MISSION</B></a></li>
<li><a href="class.html"><B>CLASS</B></a></li>
<li><a href="contacts.php"><B>CONTACT</B></a></li>
</ul>
</div>
</div>
<div style="overflow:hidden;">
<img src="bg.jpg" class="responsive">
<h1 class="centered"><b>
ABOUT US</b>
</h1>
</br>
<div class="line">
</div>
<div class="text"><font class="textfont">
SFHI SDI DSIH FSHIFSHIFSH FSHISHF HFS ISFH IFHSIISF FHSIHISF FSHI IHFS HISF H FISHF ISIFHS FHSFSIH H SFIIS FHFHI SFHSIFSHIF SF SFIH SFH SFHHFS OFHS F SOHHFS IFSSFHI FHSI FSHFSH OSF SOHF SOHF OHFS FHS OF H SOFSOH OSFH SHFOHFOS HFSH OFHOSF FOHSFHOSHF SHOFSOHF SOHF HOS FSOH FSHO FSO
</font>
</div>
</div>
<div class="below">
<center>
<h2 style="padding:10px;"> INSTITUTE </h2>
<br>
999323 - 32U932
<br><br>
5 St, Block 7
<br><br>
</center>
<div class="end" >
<img src="fb.png" height="50" width="50" style="float:left;">
<img src="instagram.png" height="57" width="58" style="float:left; margin-top:-3px;">
<img src="location.png" height="43" width="43" style="float:left; margin-top:3px;">
</div>
</div>
</body>
</html>
最佳答案
您可能需要使用视口(viewport)标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
参见 w3schools:https://www.w3schools.com/css/css_rwd_viewport.asp
关于html - 网站和手机页面的不同 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53585925/