试图解决 rwd 网格视口错误

Question

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

一个Codepen link的代码。

<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%;}
}

Answer 1

嗯，首先你需要了解html和css的基础知识，css classes，里面有一个html标签分隔space NOT 逗号，知道了，让我们去编码吧。

您正在使用逗号分隔 class，如前所述

<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 class 中使用的 clearfix hack，不要忘记添加之前的其余规则，它是自己的 class。有这个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 我制作了一些响应专栏。

Answer 2

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

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

试图解决 rwd 网格视口错误

Trying to resolve rwd grid viewport error

html

css

grid

responsive-design