尝试解决 rwd 网格视口错误答案

【问题标题】：Trying to resolve rwd grid viewport error尝试解决 rwd 网格视口错误
【发布时间】：2020-05-24 04:43:00
【问题描述】：

在遵循 w3schools 关于如何制作网格布局的指南之后，我一直在尝试使用网格布局。无论我做什么，所有的行都会在视口中 100% 显示。我已经制作了许多行，并用不同的列组合将它们分开，但没有任何效果。

<div class="row">
    <div class="col-6, sec1">Content</div>
    <div class="col-6, sec2">Content</div>
</div>

[class*="col-"] {
    width:100%;
    float:left;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (min-width:768;){
    /*Desktops*/
    .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%;}
    .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%;}
}

【问题讨论】：

标签： html css responsive-design grid

【解决方案1】：

嗯，首先你要了解html和css的基础知识，css类，html标签里面用空格NOT用逗号隔开，知道了，我们上代码吧。

如前所述，您使用逗号分隔类

<div class="col-6 sec1">Use classes like this!</div>
<div class="col-6, sec1">Do NOT use classes like this!</div>

在您的选择器中，您忘记设置最小高度，否则，您的某些列可能会根据声明不显示。

[class*="col-"] {
    width: 100%;
    float: left;
    min-height: 1px;
}

在声明媒体查询时，您必须像任何其他单位一样威胁它。您忘记了min-width: 768 中的单位。

@media only screen and (min-width:768px){
    // Do your media
}

您在.row 类中使用的 clearfix hack，不要忘记添加之前的其余规则和它自己的类。有这个micro clearfix hack你可以看看。

.row {
    *zoom: 1;
}

.row::after {
  content: " ";
  display: table;
  clear: both;
}

.row::before {
  content: " ";
  display: table;
}

提示： 如果您查看一些 css 框架，它们中的大多数都有不同的断点列名，例如大型设备的 col-lg- 中型设备的 col-md-。如果在创建一些列布局时采用这种做法会更好。

看看this jsFiddle，我在其中制作了一些响应式专栏。

【讨论】：

好的，谢谢。我只需要仔细观察并寻找看起来像的小错误。在我的第一次尝试中，我确实尝试为不同的屏幕尺寸制作课程；但是，我认为在我目前的水平上，事情过于复杂了。肯定会尝试一下。感谢您的帮助！

【解决方案2】：

我注意到您的代码中有两个错误：

类名是<div class="col-6,sec1"> 但应该是 <div class="col-6 sec1">
媒体查询定义为@media only screen and (min-width:768;) 但应该是 @media only screen and (min-width:768px)

【讨论】：