Question

在我的HTML中我使用CSS在我的几个标签上指定宽度。为媒体查询设置CSS时，是否需要列出具有特定宽度的每个标签？如果是这样，怎么样？保持它与全屏的比例？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jenifer Troska</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/ico" href="images/icon.ico"/>



</head>

<body>
<div id="mainWrap">
<div id="mainPanel">
 <div id="menu">
  <ul>
   <li><a href="index.html"><span>Home</span></a></li>
   <li><div class="blank"></div></li>
   <li><a href="about.html"><span>About&nbsp;Me</span></a></li>
   <li><div class="blank"></div></li>
   <li><a href="family.html"><span>Family</span></a></li>
   <li><div class="blank"></div></li>
   <li><a href="projects.html"><span>Projects</span></a></li>
   <li></li>
   <li><div class="blank"></div></li>
   <li><a href="contact.html"><span>Contact</span></a></li>
  </ul>
 </div>
  <div id="logoWrap"><h1>Jenifer Troska</h1>
  </div>
 <div id="webdesign"> -strong, healthy web design </div>
 <div id="quots"><p>&quot;The purpose of life is to live it, to taste experience to the utmost, to reach out eagerly and without fear for newer and richer experience.&quot; 
</p>
   <p>― Eleanor Roosevelt</p>
 </div>
 <div id="leftPanel">
  <div class="about">
   <h2>Welcome! You can call me Jen.</h2>
   <h3>Glad you found me</h3>
   <p><span>This is my personal website! Second website I've created! </span><br />
      Within my website you will find photos and information about me, my family and information about my new found interest into web design! Keep in mind I'm a beginner! I am having a blast playing around with web design but do not {DO NOT} consider myself a professional. See something corny? See something you would change? I take and appreciate constructive criticism. See &quot;contact &quot; to send these thoughts my way.</p>
  </div>
  <div class="services">
   <h2>Spectrum of Services</h2>
   <div class="pic"></div>
   <p>I run a registered in-home childcare and design websites on the side.</p>
   <h3>Services</h3>
   <ul>
    <li><a href="#">Small Business &amp; Personal Web Design (coming soon!)</a></li>
    <li><a href="#" class="bottom">In-Home Childcare (coming soon)</a></li>
   </ul>
   <p><span>Use these links to learn about my work and see what services I have to offer.</span> </p>
  </div>
  <div class="testimonial">
   <h2>Testimonial</h2>
   <p> <span>I don't have any yet.</span></p>
   <h3><span>by</span> who wants to be the first?</h3>
    <p><span>I don't have any yet.</span></p>
   <h3><span>by</span> who wants to be second?</h3>
  </div>
 </div>



 <div id="rightPanel">
  <h2>Photography</h2>


   <div class="pic1">

   <a href="images/pic2_large.jpg" rel="lightbox" title="Beautiful Winter"> 
    <img src="images/pic2.jpg"> 
    </a> 
   </div> 

    <div class="pic2">

   <a href="images/pic3_large.jpg" rel="lightbox" title="Cottage"> 
    <img src="images/pic3.jpg"> 
    </a> 
   </div> 

   <div class="pic3">
  <a href="images/pic4_large.jpg" rel="lightbox" title="9-11"> 
    <img src="images/pic4.jpg"> 
    </a> 
   </div> 


  <div class="contacts">
   <h2>Quick Note</h2>

<form class="contact_form" method="post" action="process.php"  name="contact_form">



   <p>Name</p>
   <input name="name" type="text" id="name" placeholder="Name" />


     <p>Email</p>
   <input name="email" type="text" id="email" placeholder="Your Email Address" />


     <p>Note</p>
     <input name="comments" id="comm" placeholder="Your Message" />



   <div class="blank2"></div>
   <input type="submit" name="submit" value="Send" />
   </form>

  </div>



  <div class="project">
   <h2>Project Links</h2>
   <ul>
    <li><a href="index.html">My Personal Website</a></li>
    <li><a href="Ulen Civic and Commerce Webste By Jenifer Troska/main.html">Ulen Civic &amp; Commerce</a></li>
    <li><a href="#">My Professional Website (coming soon)</a></li>
    <li><a href="#">Coming Soon</a></li>
    <li><a href="#">Coming Soon</a></li>
    <li><a href="#">Coming Soon</a></li>
   </ul>
  </div>
 </div>
 <div id="footPanel">
  <div class="nav">
   <ul>
    <li><a href="index.html">Home</a></li>
    <li><div class="blank">|</div></li>
    <li><a href="about.html">About Me</a></li>
    <li><div class="blank">|</div></li>
    <li><a href="family.html">Family</a></li>
    <li><div class="blank">|</div></li>
    <li><a href="projects.html">Projects</a></li>
    <li><div class="blank">|</div></li>
    <li></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>
  <div class="copyright">© Jenifer Troska &#8226; 2014 &#8226; All Rights Reserved.                 
    <a href="https://www.facebook.com/Jenifertroska"><img src="images/social media/1391307458_facebook.png" alt="facebook" width="40" height="40" class="social-media-icons" /></a>
    <a href="https://plus.google.com/u/0/110481900379360519368/"><img src="images/social media/1391307464_google.png" alt="google plus" width="40" height="40" class="social-media-icons" /></a>
    <a href="https://twitter.com/jeniferLTroska"><img src="images/social media/1391307501_twitter.png" alt="twitter" width="40" height="40" class="social-media-icons" /></a><a href="http://www.pinterest.com/jenifertroska/"><img src="images/social media/1391307492_p.png" alt="pinterest" width="40" height="40" class="social-media-icons" /></a></div>
 </div>
</div>
</div>
</body>
</html>

CSS ----

body{margin:0px; padding:0px; background:#fffde4 url(../images/bodyBg.jpg) repeat-x}


#mainWrap{width:100%; margin:0px; padding:0px; float:left; background:url(../images/headBg.jpg) no-repeat}
#leftPanel .about .emailaddress a { font-size:16px; margin-left:180px; color:#bb9d59; text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
}
#leftPanel .about .emailaddress a:hover {font-weight:bold; color:#943415;}

#mainPanel{
    width: 990px;
    margin: 0px;
    padding: 0px;
    float: left;
}
#logoWrap{width:100%; margin:0px; padding:0px; float:left}


h1{width:223px; height:48px; margin:70px 0 0 0; padding:0 110px; float:right; line-height:10px; text-indent:-9999px; background:url(../images/jenlogo.png) no-repeat}

#webdesign {
            width: 223px;
            height: 38px;
            margin: 90px 0 0 0;
            padding: 0 110px;
            float: right;
            line-height: 7px;
            text-indent: 0;
            color: #26606D;
            font-style: italic;
            font-size: 18px;
        }
#quots{width:990px; margin:145px 0 0 0; padding:0px; float:left}
#quots p{margin:0px; font-family:Georgia; font-size:28px; color:#497f35; line-height:32px; text-align:center; text-indent:50px}
#leftPanel{width:637px; margin:27px 0 0 0; padding:0 0 0 35px; float:left}
#leftPanel .about{width:604px; margin:0px; padding:0px; float:left}
#leftPanel .about h2{
    width: 604px;
    margin: 0px;
    padding: 0px;
    float: left;
    font-family: Georgia;
    font-size: 30px;
    color: #0b636b;
    line-height: normal;
    font-weight: normal;
    text-align: left;
}
#leftPanel .about h3{width:604px; margin:4px 0 0 0; padding:0px; float:left; font-family:Georgia; font-size:18px; color:#943415; line-height:32px; font-weight:normal}
#leftPanel .about p{
    width: 590px;
    margin: 3px 0 0 0;
    padding: 0px;
    float: left;
    font-family: Arial;
    font-size: 12px;
    color: #bb9d59;
    line-height: 16px;
    background-color: #FFFDE4;
}
#leftPanel .about p span{
    font-weight: bold;
    text-align: center;
}
#leftPanel .about .date{width:600px; height:29px; margin:30px 0 0 0; padding:0px; float:left; background:#f9f6d4}
#leftPanel .about .date .left{width:139px; height:29px; margin:0px; padding:0 0 0 35px; float:left; font-family:Arial; font-size:11px; color:#bb9d59; line-height:30px; font-weight:bold; background:url(../images/cal.jpg) no-repeat 11px 0}
#leftPanel .about .date .right{width:65px; height:29px; margin:0px; padding:0 0 0 38px; float:left; background:url(../images/read.jpg) no-repeat 12px 0}
#leftPanel .about .date .right a{font-family:Arial; font-size:11px; color:#943415; line-height:30px; font-weight:bold; text-decoration:none}
#leftPanel .services{width:604px; margin:34px 0 0 0; padding:0px; float:left}
#leftPanel .services h2{width:604px; margin:0px; padding:0px; float:left; font-family:Georgia; font-size:24px; color:#2c787b; line-height:28px; font-weight:normal}
#leftPanel .services .pic{width:163px; height:202px; margin:15px 0 0 0; padding:0 0 0 28px; float:left; background:url(../images/homepagejenface.jpg) no-repeat}

#leftPanel .services .pic a{font-family:Arial; font-size:10px; color:#943415; line-height:14px; margin:146px 0 0 0; padding:0px; float:left; width:123px}

#leftPanel .services p{
    width: 390px;
    margin: 14px 0 0 0;
    padding: 0 0 0 20px;
    float: left;
    font-family: Arial;
    font-size: 12px;
    color: #bb9d59;
    line-height: 16px;
}
#leftPanel .services p span{font-weight:bold}


#leftPanel .services h3{width:390px; margin:13px 0 0 0; padding:0 0 0 20px; float:left; font-family:Georgia; font-size:18px; color:#5c4527; line-height:22px; font-weight:normal}
#leftPanel .services ul{width:390px; margin:5px 0 0 0; padding:0 0 0 20px; float:left; display:block}
#leftPanel .services ul li{width:390px; margin:0px; padding:0px; float:left; display:block}

#leftPanel .services ul li a{width:372px; height:22px; margin:0px; padding:0 0 0 18px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:20px; font-weight:bold; text-decoration:none; border-bottom:#d8cd2f dashed 1px; background:url(../images/listStyle.jpg) no-repeat 2px 6px}

#leftPanel .services ul li a.bottom{width:372px; height:22px; margin:0px; padding:0 0 0 18px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:20px; text-decoration:none; border-bottom:0px; background:url(../images/listStyle.jpg) no-repeat 2px 6px}

#leftPanel .services ul li a:hover {font-weight:bold; font-size:12px;}


#leftPanel .testimonial{width:590px; margin:0px; padding:0px; float:left}
#leftPanel .testimonial h2{width:590px; margin:30px 0 0 0; padding:0px; float:left; font-family:Georgia; font-size:24px; color:#2c787b; line-height:28px; font-weight:normal}
#leftPanel .testimonial p{width:590px; margin:13px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:16px; text-indent:12px; background:url(../images/quo.jpg) no-repeat}
#leftPanel .testimonial p span{font-weight:bold}
/*#leftPanel .testimonial p .dqo{width:11px; height:9px; text-indent:-9999px; background:url(images/quo.jpg) no-repeat}*/
#leftPanel .testimonial h3{width:100px; height:17px; margin:6px 0 0 0; padding:0 0 12px 28px; float:left; font-family:Arial; font-size:11px; color:#943415; font-weight:bold; background:url(../images/testimIco.jpg) no-repeat}
#leftPanel .testimonial h3 span{font-weight:normal}

#leftPanel .services .projects2 {
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: 220px;
}



#rightPanel{width:266px; margin:40px 0 0 0; padding:0 0 74px 36px; float:left; background:url(../images/rigthBg.jpg) no-repeat}
#rightPanel  h2{width:262px;  margin:0px; padding:0px; float:left; font-family:Georgia; font-size:24px; color:#0b636b; line-height:28px; font-weight:normal}

#rightPanel .view{width:58px; margin:3px 2px 0 0; padding:0 0 0 15px; float:right; font-family:Arial; font-size:11px; color:#943415; font-weight:bold; text-decoration:none; background:url(../images/listStyle.jpg) no-repeat 0 4px}

#rightPanel .pic1{width:262px; height:68px; margin:15px 0 0 0; padding:0px; float:left; background:url(../images/pic2.jpg) no-repeat}
#rightPanel .pic2{width:262px; height:68px; margin:13px 0 0 0; padding:0px; float:left; background:url(../images/pic3.jpg) no-repeat}
#rightPanel .pic3{width:262px; height:68px; margin:13px 0 0 0; padding:0px; float:left; background:url(../images/pic4.jpg) no-repeat}


#rightPanel .contacts{width:266px; margin:18px 0 0 0; padding:0px; float:left}
#rightPanel .contacts h2{padding:0 0 2px 0}
#rightPanel .contacts p{
    width: 42px;
    height: 19px;
    margin: 12px 0 0 0;
    padding: 0px;
    float: left;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #bb9d59;
    line-height: 18px;
    text-align: left;
}
#rightPanel .contacts input{width:207px; height:16px; margin:12px 0 0 0; padding:2px 0 0 9px; float:left; font-family:Arial; font-size:10px; color:#000000; border:#e8e6c8 solid 1px; background:#f8f5d2}
#rightPanel .contacts a{width:93px; height:19px; margin:12px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:11px; color:#943415; line-height:18px; text-align:center; text-decoration:none; background:url(../images/contactsBg.jpg) no-repeat}
#rightPanel .contacts .blank{width:10px; height:19px; margin:0px; padding:0px; float:left}
#rightPanel .contacts .blank2{width:42px; height:19px; margin:12px 0 0 0; padding:0px; float:left}


#rightPanel .project{width:266px; margin:30px 0 0 0; padding:0px; float:left}
#rightPanel .project ul{width:260px; margin:8px 0 0 0; padding:0px; float:left; display:block}
#rightPanel .project ul li{width:260px; margin:0px; padding:0px; float:left; display:block}

#rightPanel .project ul li a{width:250px; height:21px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:18px; text-decoration:none; background:url(../images/listbg.jpg) no-repeat}
#rightPanel .project ul li a:hover{font-weight:bold; color:#943415}
#rightPanel .project ul li a.bottom{width:250px; height:20px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:12px; color:#bb9d59; line-height:18px; text-decoration:none; background:url(../images/listbg.jpg) no-repeat}
#rightPanel .project ul li a.bottom:hover{font-weight:bold; color:#943415} 

#rightPanel .activities {width:266px; margin:30px 0 0 0; padding:0px; float:left}
#rightPanel .activities ul {width:260px; margin:8px 0 0 0; padding:0px; float:left; display:block}
#rightPanel .activities ul li {
    width: 250px;
    height: 21px;
    margin: 0px;
    padding: 0 0 0 10px;
    float: left;
    font-family: Arial;
    font-size: 12px;
    color: #bb9d59;
    line-height: 18px;
    text-decoration: none;
    background: url(../images/listbg.jpg) no-repeat; list-style-type:none;
}

#footPanel{width:923px; margin:0px; padding:25px 0 29px 0; float:left; background:url(../images/footbg.jpg) no-repeat center top}
#footPanel .nav{width:923px; margin:0px; padding:0px; float:left}
#footPanel .nav ul{width:375px; margin:0 auto; padding:0px; display:block}
#footPanel .nav ul li{width:auto; margin:0px; float:left; padding:0px; display:block}
#footPanel .nav ul li .blank{width:auto; margin:0px; padding:0 7px 0 7px; float:left; font-family:Arial; font-size:11px; font-weight:bold; color:#943415}
#footPanel .nav ul li a{width:auto; margin:0px; float:left; padding:0px; font-family:Arial; font-size:11px; font-weight:bold; color:#943415; text-decoration:none}
#footPanel .copyright{
    width: 923px;
    padding: 0px;
    float: left;
    font-family: Arial;
    font-size: 11px;
    color: #bb9d59;
    line-height: 15px;
    text-align: center;
    position: static;
    margin-top: 3px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 88px;
}
#footPanel .designInfo{width:923px; margin:3px 0 0 0; padding:0px; float:left; font-family:Arial; font-size:11px; font-weight:bold; color:#bb9d59; text-align:center}
#footPanel .designInfo a{color:#943415; text-decoration:none}
#footPanel .validation{width:923px; margin:4px 0 0 0; padding:0px; float:left}
#footPanel .validation ul{width:138px; margin:0 auto; padding:0px; display:block}
#footPanel .validation ul li{width:auto; margin:0px; padding:0px; float:left; display:block}
#footPanel .validation ul li .blank{width:6px; height:17px; margin:0px; padding:0px; float:left}
#footPanel .validation ul li a{width:66px; height:17px; margin:0px; padding:0px; float:left; font-family:Arial; font-size:10px; font-weight:bold; color:#943415; line-height:16px; text-align:center; text-decoration:none; background:url(../images/validationBg.jpg) no-repeat}
#menu{width:990px; margin:32px 0 0 0; padding:0px; float:left}
#menu ul{width:450px; margin:0px; padding:0px; float:right; display:block}
#menu ul li{width:auto; margin:0px; padding:0px; float:left; display:block}
#menu ul li a{width:auto; height:18px; margin:0px; padding:0px; float:left; font-family:Arial; font-size:12px; color:#45ada9; line-height:13px; text-decoration:none; cursor:pointer}
#menu ul li a:hover{background:url(../images/rightCurve.jpg) no-repeat right}
#menu ul li a span{width:auto; height:16px; margin:0px; padding:2px 8px 0 8px; float:left; cursor:pointer}
#menu ul li a:hover span{background:url(../images/leftCurve.jpg) no-repeat left}
#menu ul li .blank{width:1px; height:18px; margin:0px; padding:0 5px 0 5px; float:left; background:url(../images/mBlank.jpg) no-repeat center top}
.social-media-icons {
    float: right;
}
#goals {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #bb9d59;
    background-color: #fffde4;
    padding: 0px;
    float: left;
    margin-top: 3px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 250px;
}
/*Media CSS */
@media screen and (max-width: 640px) {
#mainWrap:{ width:50%;}
#mainPael: {width:50%;} 
h1 {width:50%;
}
#webdesign {width:50%;}
#logoWrap {width:50%;}
}

Answer 1

您可以使用媒体查询加载不同的css文件样式，或在同一文件中使用媒体查询，

if you would like use media query in one file you can using this 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

@media only screen 
and (min-width : 321px) {
/* Styles */
}

@media only screen 
and (max-width : 320px) {
/* Styles */
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}


@media only screen 
and (min-width : 1224px) {
/* Styles */
}

we used min-width alone, when we needed to execute code when screen is more than number 
such as: min-width: 1224px; thats mean execute when screen width is equal or more than 1224px

and max-width is Reverse min-width, also using both when needed a range width screen

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

使用媒体查询 - 我定位哪些标签？

1 个答案: