Question

我想让我的网页做出回应。这是一个3列的布局，每次我在移动设备和平板电脑模拟器中检查它，它看起来很糟糕。我是html5的新手，所以我不确定我在做什么，而且我一直试图弄清楚这一段时间，并且已经到了一堵砖墙。任何建议都会很棒！

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #000000;
  background-color: #969696;
  margin: 0;
}


/* STRUCTURE */

.wrapper {
  max-width: 1240px;
  width: 100%;
  margin: 0px auto;
}

header {
  background-color: #000000;
  text-align: right;
  color: #FFFFFF;
  height: 120px;
  padding: 10px;
  border-bottom: 2px solid;
}

.columns {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 5px 0;
}

.column {
  flex: 1;
  margin: 0px;
  padding: 20px;
  background-color: #FFFFFF;
  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
}

footer {
  padding: 0 15px;
}

#navigation {
  height: 60px;
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  text-align: center;
  background-color: #000000;
}

#navigation ul {
  height: auto;
  padding: 9px 0px;
  margin: 0px;
}

#navigation li {
  display: inline;
  padding: 16px;
}

#navigation a {
  text-decoration: none;
  color: #FFFFFF;
}

#rose {
  overflow: hidden;
}

#newDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  margin-left: 80px;
  margin-right: 80px;
}

@media screen and (max-width: 980px) {
  .columns .column {
    margin-bottom: 5px;
    flex-basis: 40%;
    &:nth-last-child(2) {
      margin-right: 0;
    }
    &:last-child {
      flex-basis: 100%;
      margin: 0;
    }
  }
}

@media screen and (max-width: 680px) {
  .columns .column {
    flex-basis: 100%;
    margin: 0 0 5px 0;
  }
}

＆＃13;

<!DOCTYPE html >
<html lang="en">

<head>
  <title>St. Pete Flower Market</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="new3.css">
  <!-- [if it IE 9]>
    <script src="html5shiv.js>
    </script>
    <![endif]-->
</head>

<div class="wrapper">

  <header> <img src="logo.jpg" alt="flower logo" style="float:left;" height="105" ;>
    <h1>St. Pete Flower Market</h1>
  </header>
  <nav>
    <div id="navigation">
      <ul>
        <li><a class="navigation" href="index.html">Home</a></li>
        <li><a class="navigation" href="contact.html">Contact Us</a></li>
        <li><a class="navigation" href="occasions.html">Occasions</a></li>
        <li><a class="navigation" href="flowers.html">Flowers</a></li>
        <li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
        <li><a class="navigation" href="deals.html">Deals</a></li>
        <li><a class="navigation" href="aboutus.html">About Us</a></li>
      </ul>
    </div>
  </nav>

  <section class="columns">

    <div class="column">
      <h2>1st Content Area</h2>

    </div>

    <div class="column">
      <div id="rose">
        <img src="roses.jpg" alt="roses" height="300">
      </div>
      <div id="newDiv">
        <div class="image123">
          <div class="imageContainer">
            <img src="sunnydays.jpg" alt="sunflowers" height="300" width="300">
            <p>This is image 1</p>
          </div>
          <div class="imageContainer">
            <img class="middle-img" src="flowerdeal.jpg" alt="flowerdeals" height="300" width="300">
            <p>This is image 2</p>
          </div>

        </div>

        <div class="image1234">
          <div class="imageContainer2">
            <img src="sunnydays.jpg" alt="sunflowers" height="300" width="300">
            <p>This is image 1</p>
          </div>
          <div class="imageContainer2">
            <img class="middle-img" src="flowerdeal.jpg" alt="flowerdeals" height="300" width="300">
            <p>This is image 2</p>
          </div>
        </div>
      </div>

    </div>

    <div class="column">
      <h2>3rd Content Area</h2>

    </div>

  </section>

  <footer>
    <h3>Footer</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
  </footer>

</div>

</html>

＆＃13;

HTML5的移动和平板电脑响应能力

0 个答案: