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看到：
