2
这是我的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看到：
