CSS 响应式查询

Question

我正在做一个项目，我有客户想要的布局。我是响应式布局的新手。在宽度为 321px 的移动设备中，我努力让正确的列扩展到 screen/device.

的整个宽度

我知道这可能是一个重复的问题，下面是一个 fiddle 但如果有人可以看一下并提供一些建议或指出我以前的答案，我将不胜感激。

@media only screen  
and (max-width : 320px) {
 
.container {
width: 321px ! important; 
} 
 
#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right; 
margin-left; 10%;
} 

 

}


body {
  background-image: url(images/khBG.gif);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  margin: 0;
  padding: 0;
  font-family: "Century Gothic", Verdana, sans-serif;
  color: black;
  border: 1px solid black;
}

#banner {
  padding-right: 5%;
  opacity: 0.7234;
  background-color: #ffffff;
  border-bottom: 1px solid black;
}
 
#banner ul {
  float: right;
  font-size: 0.70em
}

#banner ul li {
  display: block;
  float: left
}
 
#columnleft {
  padding-left: 1%;
  background-color: #ffffff;
  border-bottom: 1px solid black;
  opacity: 0.7234;
  float: left;
  width: 15%;
  margin-left: 0%;
  padding-top: 1%;
}

#columnright {
  padding-left: 1%;
  background-color: #ffffff;
  border-bottom: 1px solid black;
  opacity: 0.7234;
  padding-top: 2%;
  width: 50%;
  float: right;
  overflow: hidden;
  margin-right: 30%;
  }

#columnright ul {
  overflow: hidden;
}  
  
#footer {
  clear: both;
  background-color: #ffffff;
  filter: alpha(opacity=60);
  opacity: 0.7234;
  padding-bottom: 1em;
  padding-left: 200px;
  font-size: .60em;
}

#pic-gallery {
margin-left:17.5%; 
width: 400px;
height: 400px; 
border: 1px solid black; 
align-items: center;
display:flex; 
}

#pic-ver {
    padding-top: 50px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 100px; 
}

#pic-hor {
    padding-top: 100px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 50px;
}

#myGallery {
  position: relative;
  width: 320px;
  /* Set your image width */
  height: 267px;
  /* Set your image height */
}

#myGallery img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  }

#myGallery img.active {
  display: block;
}

.titlegrp {
 
}

.title { 
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}

.subtitle {
  font-family: "Segoe Script", Segoe, sans-serif;
  font-size: 1.05em;
}

.h1 {
  font-family: "Segoe Script", Segoe, sans-serif;
  font-size: .9em;
}

.imgleft {
  float: left;
  margin-right: 5px;
}

.imgright {
  float: right;
  margin-right: 60px;
}

.contentpara {
  padding-left: 15px;
}

.sidelinks {
  font-family: "Century Gothic", Verdana, sans-serif;
}

.sidelinks a:link {
  text-decoration: none;
  color: black;
}

.sidelinks a:hover {
  text-decoration: none;
  font-family: "Segoe Script", Segoe, sans-serif;
}

.sidelinks a:visited {
  text-decoration: none;
  color: blue;
}

.tablecont {
  padding-left: 15px;
}

div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
 -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
}

div.img:hover {
    border: 1px solid #777;
 }

div.img  {
   width: 100%;
    height: auto; 
 
}

div.desc {
    padding: 15px;
    text-align: center;
}

.image-wrapper { 
margin: auto;
align-items: center;
justify-content: center;
}

.gal-butt {
font-size: 2.5em;
margin: auto;
}

<!doctype html>

<html lang="en">

  <header>
    <meta charset="utf-8">

    <title>Katie's House - West Hull Based Childminder</title>
    <link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
    <meta name="description" content="">
    <meta name="author" content="Brian Johnson">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="KHjscript.js"></script>
    <link rel="stylesheet" href="kHIndex.css">

  </header>

  <body>
    <div class="container">
       <div id="banner">
  <ul class="none">
   <li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
   <img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
   <li class="nav"> <a href="mailto:katiesummers789@gmail.com">
   <img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
   <li class="field"><input type="text" title="Search" text="Search" /></li>   
  </ul>  
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title">  
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div>  
      </div>   
  <div id="columnleft">
  <div class="subtitle"><p><u>Site Navigation</u></p></div>
 <div class="sidelinks">
    <a href="Index.htm">Home</a>
  <br>
  <a href="About.htm">About</a>
  <br>
  <a href="Sample_Day.htm">Sample Day</a>
  <br>
  <a href="Gallery.htm">Gallery</a>
  <br>
  <a href="Testimonials.htm">Testimonials</a>
  <br>
  <a href="Enquiries.htm">Enquiries</a>
  <br>
</div>
      </div>
      <div id="columnright">
        <div class="subtitle"><u>Katie's House Services</u></div>
        <div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
        </div>
        <p>What Katie's house can offer you</p>

        <ul>
          <li>Early years child care 0-5 years</li>
          <li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
          <li>Long term and short term care</li>
          <li>Full time and part time places</li>
          <li>Professional and affordable</li>
        </ul>
 <hr> 
<p>My Qualifications</p>

<p>I attend training regularly and have qualifications in:</p>
  
        <ul>
          <li>Paediatric First Aid</li>
          <li>Child Protection</li>
          <li>Special Educational Needs</li>
          <li>Food Hygiene</li>
    <li>Health and Safety</li>
          <li>Equal Opportunities</li>
    <li>Home based Childcare</li>
    <li>Working with two year olds</li>
          <li>schemas</li>
    <li>NVQ3 Children's care, Learning and Development</li>
    <li>Open University - Understanding Autism</li>
  </ul>  
 
  <br>
        <p>Click below for a little information on Childminding</p>
        <a href="http://www.pacey.org.uk/parents/types_of_childcare/registered_childminders.aspx" target="_blank">Pacey's Info on Registered Childminders</a>
  <div style="clear: both;"></div>
  <br>
      </div>
   
      <div id="footer">
        <p>Brian Johnson
          <br>&copy; Copyright 2016. All Rights Reserved</p>
      </div>
  </div> 
  </body>

</html>

https://jsfiddle.net/aw3eb1oa/

Answer 1

您需要像这样覆盖之前的 CSS：

@media only screen and (max-width : 320px) {
.container {
width: auto;    
}   

#columnleft,#columnright {
float: none;
width: 100%;
}
}

Answer 2

你真的很接近 - 只需要将你的媒体查询放在 CSS 的底部，这样它就可以覆盖其他样式。然后添加一个width:100%;和margin-left: 0;

#columnleft, #columnright {
  float: none;
  width: 100%;
}

#columnright {
  display: block ! important;
  clear: right; 
  margin-left: 0;
}

更新：Fiddle

CSS 响应式查询

CSS responsive query

css

responsive