HTML、CSSモバイルビュー問題が

Question

モバイルビューは、デスクトップ 上にあるようにあなたは私が作った、あなたの携帯電話のウェブブラウザ でもスライダーでこれもhttps://portal2portal.mlを確認することができますでも、私が持っている携帯電話では正しく表示されていないではありませんモバイルビューを修正するためにメディアクエリを試しましたが、動作しませんでした。 問題は となります。1.ホバーナビゲーションバー。 2.スライダー。

だから、誰かが私を助けてくれることを願っています。 ----------- 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

[OK]を、最初にあなたがいます欠落しているビューポートタグ：

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

幅=デバイス幅部分は（デバイスに依存して変化する）デバイスの画面幅に追従するページの幅を設定します。 initial-scale = 1.0の部分は、ページがブラウザによって最初に読み込まれるときの初期ズームレベルを設定します。あなたはこの必要はありません

：

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

は、CSSファイル内のメディアクエリを記述します。