Question

移动视图与桌面上的视图不同 您也可以在移动网络浏览器中查看此https://portal2portal.ml 甚至我已经制作的滑块在手机中也没有正确显示，即使我已经尝试过媒体查询来修复移动视图但不能正常工作。问题在于 1.Hover导航栏。 2.Slider。

希望有人会帮助我。 ----------- CSS --------------------

.body{
    font-family:arial,sans-serif;
    height:auto;
    width:auto;
}


*{
    padding: 0px;
    margin: 0px;
}
#secdiv{
    opacity:100;
    filter:(opacity=70;);
}
#maindiv ul{
    width:100%;
    height:80px;
    background:black;
    line-height:80px;
    color:white;
    margin:auto;
    text-align:center;
     font-family: "Times New Roman", Times, serif;
    font-size:50px;


}
#secdiv ul a{
    text-decoration: none;
    color: white;
    padding:15px;
    text-align:center;
}
#secdiv ul li{
        list-style-type:none;
        display:inline-block;
        float:center;
        text-align:center;
    }
#secdiv ul li:hover{
    background:darkred;
    transition:all 0.40s;
}
#secdiv h1{
    width:100px;
    float:left;
    cursor:pointer;
    margin-left:29px;
}

body{
font-family:"Oxygen",sans-serif;
font-size:16px;
line-height:1.5;
}
.content{
position:relative;
z-index:2;
margin:13% auto;
width:50%;
text-align:center;

}
.heading{
     font-family: "Times New Roman", Georgia, Serif;
margin-bottom:24px;
color:RED;
font-size:44px;

}
.para{
margin-bottom:24px;
color:orange;
font-size:44px;
 font-family: "Times New Roman", Georgia, Serif;
}
.btn{
padding:12px 28px;
color:#ff3c64;
font-size:22px;
text-decoration:none;
border:4px solid #ff3c64;}
#wrapper {
    margin:0 auto;
    width:100%;
    text-align:center;
    position:absolute;
    top:500px;
}
#googleimg{
    border-radius:50%;
    width:150px;
    height:150px;
    background-image:url("googleimage.jpg");
  background-size:cover;
       box-shadow: 10px 10px 5px #888888;   
}
#wrapper2 {
    margin:0 auto;
    width:100%;
    text-align:center;
    position:absolute;
    top:500px;
    left:200px;
}
#railwayimg{
    border-radius:50%;
    width:150px;
    height:150px;
    background-image:url("railwayimg.jpg");
  background-size:cover;
       box-shadow: 10px 10px 5px #888888;   
}
#wrapper3 {
    margin:0 auto;
    width:100%;
    text-align:center;
    position:absolute;
    top:512px;
    left:400px;
}
#govind{
    border-radius:50%;
    width:150px;
    height:150px;
    background-image:url("govind.png");
  background-size:cover;
       box-shadow: 10px 10px 5px #888888;   
}
#contactus
{
 font-family:"Times New Roman",Times,serif;
 font-size:35px;
}
.container
{
    text-align:center;
    color:#2c2c2c;
    text-decoration:none;
    outline:thick ridge red;
    height:300px;
    width:300px;
    right:400px;
    margin:auto;
    background-color:#ffd6cc;

}
#mySidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -80px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 15px; /* 15px padding */
    width: 100px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 20px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
    font-family: "Times New Roman", Times, serif;
}

#mySidenav a:hover {
    left:0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
    top: 200px;
    background-color:red ;
     font-family: "Times New Roman", Times, serif;
}

#tools{
    top:300px;
    background-color:blue; /* Blue */
     font-family: "Times New Roman", Times, serif;
}
#contact {
    top:400px;
    background-color:green /* Light Black */
}
h1{
    text-align:center;
    text-shadow:2px 2px 5px red;
    font-family: "Times New Roman", Times, serif;
}


.slider{
    width:800px;
    height:400px;
    background:url("sliderimage1.PNG");
    margin:100px auto;
    animation:slide 5s infinite;
    outline:solid;

}
@keyframes slide{
    25%{
        background:url("sliderimage1.png");
    }

    25%{
        background:url("sliderimage11.jpg");
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Test site</title>

    <link rel="stylesheet" type="text/css" href="style.css">
   <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobilecss.css" />
   <link rel="stylesheet" type="text/css" href="slidercss.css">
      </head>
<body background="portal image.jpg">
    <div id="maindiv">
        <div id="secdiv">

                    <ul>
        <li>
            <li><a href="index.html">HOME</a></li>
        </ul>

            </div></div>
            <center><h3><p>This is a prototype Website the contents you will find here is owned by creaters of this website In below you can see Slider</p></h3></center>


<!--SLIDER STARTS HERE-->
<div class="slider">

</div>
<!--SIDEBAR NAVIGATION STARTS HERE-->

             <div id="mySidenav" class="sidenav">
  <a href="#" id="about">ABOUT</a>
  <a href="#" id="tools">TOOLS</a>
  <a href="testc.html" id="contact">CONTACT US</a>
</div>

    </body>
</html>

Answer 1

好的，首先你缺少viewport标签：

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

width = device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

你不需要这个：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobilecss.css" />

在css文件中写入媒体查询。

Html，css移动视图问题

1 个答案: