html - 网站和移动设备上的不同页面视图
问题描述
所以我创建了这个页面,但它在移动设备和 PC 上的视图不同。在网站上的视图如下
可以看出,在移动设备上,整个段落会沿着图片向下移动。我不明白为什么。网站上的所有内容都保持响应......这是此页面的代码:-
<!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>
解决方案
您可能需要使用视口标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
参见 w3schools:https ://www.w3schools.com/css/css_rwd_viewport.asp
推荐阅读
- git - 如何修改 git stash 中的消息?
- asp.net - “重新加载此页面”和从地址栏刷新页面之间的区别
- html - 当一个元素的 id 没有被使用时,它应该被移除吗?
- javascript - TypeError:浏览器未定义(Web 扩展消息)
- javascript - 为字符串变量分配另一个值
- python - Jupyter Notebook:第一个内部链接作品;后续的没有
- ios - 如何使 UIScrollView 水平
- standard-deviation - 标准偏差仅使用每日值显示在 Pine Script 的每个时间图表上
- c# - 异步读取 Excel 流
- sql - 从逗号分隔的字符串中传递值并分配给 korn shell 中的不同变量