Question

因此，我创建了此页面，但是在移动设备和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>

Answer 1

您可能需要使用视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

请参阅w3schools：https://www.w3schools.com/css/css_rwd_viewport.asp

网站和手机页面的不同视图

1 个答案: