Question

这是我的HTML代码！简单布局：

    <!DOCTYPE html>
     <html>
     <title> responsive idea web </title>
     <head>

        <!-- CSS FILES -->
        <link rel="stylesheet" href="css/style.css"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <script src="js/jquery-3.1.1.min.js">  </script>
        <script>
         //toggle function that will display pixels on diff screens
     // this script is not working but it has nothing to do with responsiveness   . 
        var showWidth =1;
        if(showWidth==1){
        $(document).ready(function(){
            $(window).resize(function(){
                var width =$(window).width();
                document.getElementById('output_width').innerHtml="window     Width:"+width.toString();
             });
        });
         }

         </script>

    </head>
    <body>
    <!-- id used to access document.getelement by id-->
    <div id="output_width"> </div>
    <!-- using html 5 elements -->
        <div id="container">
            <div class="main-header">
                 <img  id="logo" src="images/1.jpg" alt="vector"> </img> 
     <!-- using another div inside of it navigation bar and logo-->
                <nav class="main-nav">
                 <!-- remember you have to have floating elements
                 inside of non floating object like main-nav -->
                     <ul> 
                        <li><a class ="active "href="#"> Home </a></li>
                         <li><a href="#"> About </a></li>
                        <li><a href="#"> Contact </a></li>
                        <li><a href="#"> Services </a></li>
                        <li><a href="#"> Colaborate </a></li>       
                    </ul>
                </nav>
             </div>
         </div>

             <div id="main">
                 <div id="content">
                     <article class="art1">
                         <header class="art-header">
                              <h2 class="title"> <a href="#"> First Post </a></h2>
                                 <span> Its a good paragraph </span>

                         </header>
                     <p>8269 Best Font Free Vector Art Downloads from the  Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy  community.8269 Best Font Free Vector Art Downloads from the Vecteezy  community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.    </p>
                    <p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>
                      <p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>

                     <a href="#" class="Read-more"> Read More</a>


                    </article>
                         <article class="art2">
                         <header class="art-header">
                              <h2 class="title"> <a href="#"> First Post </a></h2>
                                 <span> Its a good paragraph </span>
                         </header>
                      <p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>
                     <p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>
                    <p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>

                     <a href="#" class="Read-more"> Read More</a>

                     </article>

                </div>  
                     **<aside id="side-bar">
                         <div class="block"> 
                            <h2> Top Sidebar </h2>
                                  <p>ector Font. 1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh.</p>  
                         </div>
                          <div class="block"> 
                             <h2> Mid Sidebar </h2>
                                  <p>ector Font. 1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh.</p>  
                         </div>
                         <div class="block"> 
                              <h2> Bottom Sidebar </h2>
                                  <p>ector Font. 1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh.</p>  
                          </div>
                         </aside>**

                             <div class="clr">
                             Clear both floats 
                              </div> 

                            <footer>
                            <p> copy rigt @ every one inside of it </p>
                        </footer>       
                 </div>

     </body>
     </html>
**Here is my css code !..**

    body {/*
        background-image: url("../images/2.png");
        background-repeat: repeat;*/
         font-size:87.5%; /* percent means fluid to make font good.*/
         font-family:arial,sen-serif;
        color:#666666;
        line-height:1.7em;
        text-align:left; /* all elements are now align left */  
    }

    #container{
        width:80%; /* again using 80% just to make fluid other wise it could 
        be 960 px;  --*/
        margin:0 auto;
        overflow:auto;
        clear:both;
    }

     /* now for logo */
    #logo{
        width:20%;
        margin:10px 0px;    
    }
     .main-nav{
        background-color:#882433;
        border-radius:5px;
        border:px solid #c13046;
        color:white;
     }
    .main-nav ul{
        list-style:none;
        margin:0px;
        padding:7px 0px 0px 0px;
        display:inline-block;
        background-color:;
    }
      .main-nav li{
        color:#ffffff;
        float:left;
        margin-left:3px;
     }
    .main-nav li a{
        color:#ffffff;
          /* this is used to escape from scroll bar*/
        padding:10px 20px;
        height:20px;
        display:inline-block;   
     }
    .main-nav li a:hover{
         background-color:#efeadd;
        color:#666666;
        border-radius:5px;
    }
    .main-nav li a.active{
        background-color:#efeadd;
        color:#666666;
        border-radius:5px;
}
    #content{
        width:70%;
        float:left;
        overflow:auto;      
    }
    /* articles starts---*/

         article{
         border-radius:5px;
         background-color:#F9F9F9;
         overflow:auto;
         padding:10px 20px;
         margin-top:10px;
     }
     article span{
         font-style:italic;
         color:cyan;    
    }
     a.Read-more{
         display:block;
        float:right;
        color:#ffffff;
        padding:5px 9px;
        background-color:#c13046;
        border-radius:5px;
     }
       a.Read-more:hover{
       background:cyan;
        color:#ffffff;  
    }
     .block{
        border-radius:5px;
        background:#F9F9F9;
        overflow:auto;
        padding:10px 15px;
        margin:10px 0 0 10px;
     }
     footer{
         background:#882433;
         height:40px;
         border:1px solid #c13046;
         margin-top:10px;
         border-radius:5px;
      }
      footer p{
          color:#ffffff;
          margin:0;
          padding:10px 0 0 0;
          text-align:center;
     }
    **/*Tablets and ipad portrait/Landscape*/
         @media only screen and (min-width:768px) and (max-width:960px){
          #container{
             width:95%;
          }
          #logo{
             margin:0px auto;
             display:block;
             width:65%;     
         }
         #content{
         width:100%;
         float:none;
     }
     ***#side-bar{
         float:none;
         width:100%;
         background-color:black;
      }***
    }**
    /*--ends of media query---*/
         #side-bar{
         width:30%;
         float:left;    
     }

     a{
          text-decoration:none;
         color:#781a26;
      } 
     a:hover{
         color:#666666;
     }  
     h2{
        color:#781a26;
    }
        .clr{
            clear:both;
            background-color:#781a26;
            color:#ffffff;
            text-align:center;  
     }

我试图实现这一点，每当我在媒体查询中将浏览器缩小到760px而不是id #side-bar时，其宽度设置为100％。 { width:100%;}但事实并非如此我期待什么，而不是它我没有任何工作，除了背景。我已经尝试了一切并重新检查。我不知道究竟是什么导致了这个问题。正如你在这个iamge中看到的那样：

Answer 1

重置媒体查询

@media only screen and (min-width: 768px) and (max-widt: 960px) {}

表示当屏幕尺寸为960px并停在768px时，更改将会开始。进行查询

@media only screen and (min-width: 160px) and (max-width: 760px) {
#side-bar {
    width: 100%;
    }
}

这应该有效，因为您希望侧边栏在760px处为100％。

只想要设置媒体查询的样式

1 个答案: