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;
}
私はメディアクエリでID #side-barより760pxまでのブラウザをスケールダウンしたときに、その幅を100％に設定することを達成しようとしています。 { width:100%;}しかし、これは ではありません。私はそれの代わりに出てくることを期待しています、私はバックグラウンド以外は何もしていません。私はすべてを試して再確認しました。私はその問題の原因を正確には知らない。あなたはこのiamgeで見ることができるように：
