Question

我是自适应CSS的新手。下面的代码是响应式html页面的模板。我希望它通常具有25px的边距，但是对于手机来说，应该没有任何边距。我已经尝试了尽可能多的调整组合。例如，我尝试为@media更改第1列和第12列的左/右页边距，但这没有用。

我该怎么办？

body { margin:25px; }

* { box-sizing: border-box; }

img {
  width: 100%;
  height: auto;
}

.row:after {
   content: "";
   clear: both;
   display: table;
}

[class*="col-"] {
   float: left;
   padding-top: 15px;
   width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%; }
  .col-s-2 {width: 16.66%; }
  .col-s-3 {width: 25%; }
  .col-s-4 {width: 33.33%; }
  .col-s-5 {width: 41.66%; }
  .col-s-6 {width: 50%; }
  .col-s-7 {width: 58.33%; }
  .col-s-8 {width: 66.66%; }
    
  .col-s-9 {
     width: 75%;
     padding: 15px;
  }
      
  .col-s-10 {width: 83.33%; }
  .col-s-11 {width: 91.66%; }
    
  .col-s-12 {
     width: 100%;
     padding:15px 0px 0px 0px;
  }
}

@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%; }
    .col-2 {width: 16.66%; }
    .col-3 {width: 25%; }
    .col-4 {width: 33.33%; }
    .col-5 {width: 41.66%; }
    
    .col-6 {
      width: 50%;
      padding:0px 15px 15px 15px;
    }
    
    .col-7 {width: 58.33%; }
    .col-8 {width: 66.66%; }
    .col-9 {width: 75%; }
    .col-10 {width: 83.33%; }
    .col-11 {width: 91.66%; }
    
    .col-12 {
      width: 100%;
      padding:15px;
    }
}

html { font-family: arial; }

.header {
   background-color: #9933cc;
   color: #fff;
   padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

 .menu li {
   padding: 8px;
   margin-bottom: 7px;
   background-color :#33b5e5;
   color: #fff;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover { background-color: #0099cc; }

.aside {
   background-color: #33b5e5;
   margin-bottom: 15px;
   padding: 15px;
   color: #fff;
   text-align: center;
   font-size: 14px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
   background-color: #0099cc;
   color: #fff;
   text-align: center;
   font-size: 12px;
   padding: 15px;
}

<body>
  <div class="header">
    <h1>The Island of Crete</h1>
  </div>
    
  <div class="row">
    
    <div class="col-3 col-s-3 menu">
      <ul>
        <li>The Flight</li>
        <li>The City</li>
        <li>The Island</li>
        <li>The Food</li>
      </ul>
    </div>
    
    <div class="col-6 col-s-9">
      <h1>Chania - A great city</h1>
      <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
      <!--<img src="img_chania.jpg" width="460" height="345">-->
    </div>
    
    <div class="col-3 col-s-12">
      <div class="aside">
        <h2>What?</h2>
        <p>Chania is a city on the island of Crete.</p>
        
        <h2>Where?</h2>
        <p>Crete is a Greek island in the Mediterranean Sea.</p>
        
        <h2>How?</h2>
        <p>You can reach Chania airport from all over Europe.</p>
      </div>
    </div>
    
    </div>
    
    <div class="footer">
      <p>Resize the browser window to see how the content respond to the resizing.</p>
    </div>
    
</body>

Answer 1

据我所知，您正在使用body的{{1}}边距：

25px

，但不会根据您对较小屏幕的要求进行更改。您正确使用body { margin:25px; }是正确的，但是该实现不会进一步修改@media。

因此，基本上，需要做的是：

margin

Answer 2

您的问题是，正文在样式表的顶部设置为25px的页边距-因此，无论您对列大小如何处理，整个页面始终使用25px的页边距。 / p>

在媒体查询中，插入以下内容：

body {
      margin: 0;
}

由于媒体查询的发生位置低于页面初始位置，因此它将覆盖之前的边距-请注意，这不适用于具有高分辨率屏幕的高端手机（例如，Galaxy S8具有分辨率宽度为1440px）。

手机格式无边距

2 个答案: