Question

我正在完成一项学校作业，我的任务是将预定义的布局转换为响应式智能手机布局。我相信，我已经把一切都搞清楚了，但是由于某种原因宽度让我很难，即使我的@media标签是正确的，我将宽度设置为我的容器为auto。至少这是我从书中收集到的信息。无论如何，希望有人可以看一看，看看他们是否看到了问题所在。谢谢！

JFiddle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Door County Wildflowers</title>
<meta charset="utf-8">
<meta name="viewport" 
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<link rel="stylesheet" href="flowers.css" media="only screen and (max-width: 3000px)"/>
<link rel="stylesheet" href="flowers.css" media="only screen and (max-width: 480px)"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="container">
  <header role="banner"><span><a href="#content">Skip to Contenthea</a></span>
    <h1>Door County Wildflowers</h1>
  </header>
  <nav role="navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="spring.html">Spring</a></li>
    <li><a href="summer.html">Summer</a></li>
    <li><a href="fall.html">Fall</a></li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
   <img src="plsthumb.jpg" width="100" height="100" alt="Showy Lady Slipper">
 </nav>
 <aside role="complementary">
   <h3>The Ridges</h3>
   <p class="news">The Ridges Nature Sanctuary offers wild orchid hikes during the summer months. For more info, visit <a href=
" http://www.ridgesanctuary.org ">The Ridges</a>.</p>
    <h3>Newport State Park</h3>
    <p class="news">The <a href=" http://www.newportwildernesssociety.org ">
Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday. Stop by the park office to register.</p>
  </aside>
  <main role="main" id="content">
    <h2>Door County</h2>
    <p>Wisconsin&rsquo;s Door County Peninsula is ecologically diverse &mdash; upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
    <p>The variety of ecosystems supports a large number of wildflower species.</p>
    <img src="trillium.jpg" width="200" height="150" alt="Trillium" id="floatright">
    <h3>Explore the beauty <br>of Door County Wildflowers. . . .</h3>
    <p>With five state parks, tons of county parks, and private nature sanctuaries, Door County is teeming with natural areas for you to stalk your favorite wildflowers.</p>
    <footer role="contentinfo"> Copyright &copy; 2014 Door County Wild Flowers<br>
    </footer>
  </main>
</div> 
</body>
</html>

CSS：

@media only screen and (max-width: 3000px)
{
header, nav, main, footer, aside { display: block; }
body { margin:0;
       background-color: #ffffff; }
#container { background-color: #eeeeee;
             color: #006600;
             min-width: 960px;
             font-family: Verdana, Arial, sans-serif; }
header { background-color: #636631;
         background-image: url(showybg.jpg);
         background-position: bottom;
         background-repeat: repeat-x;
         height: 120px;
         color: #cc66cc;
         text-align: right;
         padding: 0 20px;
         border-bottom: 2px solid #000000; }         
nav { float: left;
      width: 150px; }
aside { float: right;
        width: 200px; }
main { margin: 0 210px 0 160px;
        padding: 1px 10px 20px 10px;
        background-color: #ffffff;
        color: #006600; }
footer { font-size: .70em;
         text-align: center;
         color: #006600;
         background-color: #ffffff;
         padding-top: 10px;
         clear: both; }  
h1 { margin-top: 0;
     font-size: 3em;
     text-align: left;
     text-shadow: 2px 2px 2px #000000; }     
header a {font-size: 0.80em; }
header a:link, header a:visited { color: #ffffff; }
header a:focus, header a:hover { color: #eeeeee; }
nav ul { margin-top: 20px;
         list-style-type: none; }
nav a { text-decoration: none;
        font-size: 1.2em; }
nav a:link { color:#006600;}
nav a:visited { color: #003300; }
nav a:focus, #nav a:hover { color: #cc66cc; }
nav a:active { color: #000000;}
nav img { margin: 30px;}
main p { margin: 20px; }
main h2, main h3 { color: #cc66cc;
                   background-color: #ffffff; }
#floatright { margin: 10px;
              float: right; }
aside h3 { padding-bottom: 2px;
           border-bottom: 1px solid #000000;
           margin: 10px;
           font-size: 0.90em;
           color: #cc66cc; }
.news { font-size: 0.80em;
        margin: 10px; } 
}

    @media only screen and (max-width: 480px) {
    body { width: auto; margin: 0; }
    #container { width: auto; margin: 0; padding: 0;}
    header { width: auto; }
    nav, nav ul, nav li { float: none; width: auto; padding: 0;}
    nav li { inline-block; }
    nav a { display: block; padding: 0.5em 0; border-bottom: 2px ridge; }
    aside { float: left; width: auto; margin: 0; padding: 0;}
    img { display: none; }
    #content { width: auto; float: left; margin: 0; padding: 0;}
    main { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
    p { font-size: 90%; margin: 0; padding: 0;}
    h1 { font-size: 100%; }
    h3 { font-size: 100%; }

    }

    }

Answer 1

您有min-width: 960px;

尝试删除该行，看看它是否有帮助。干杯

响应式移动设计问题没有正确调整大小

1 个答案: