Question

我正在学习响应式网站设计，并在我自己尝试过的原始代码中遇到了意想不到的行为。

我的指导来源是这个 - ＆gt; W3 Schools Learning responsive website designing. 因为如果尝试将内容减少到小于600px，则每个div变为100％并覆盖整个水平位置。所以我认为这是重新设计的正常行为。

但是在我自己编写的代码中，如果我尝试不到600px，它就不会占据整个100％。它会变成一小块内容。你可以在chrome检查或调整大小。可能出现什么问题？我错过了任何声明吗？

这是我自己尝试过的代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .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%;}
}
.box1{
background-color :red;
}
.box2{
background-color :green;
}
.box3{
background-color :blue;
}
</style>
<body>
<div class="row">
<div class="col-4 col-m-12 box1"></div>
<div class="col-4 col-m-12 box2"></div>
<div class="col-4 col-m-12 box3"></div>
</div>

</body>
</html>

Answer 1

您没有max-width:600px及以上的媒体选择器，您将所有div设置为float:left，这会使他们注意到100％，所以在＆lt; 600px你的div只知道他们应该漂浮。

Answer 2

Trey是对的。您在这里学到的是Mobile First响应式设计。所以你的移动基础风格是

[class*="col-"] { float: left; padding: 15px; }

0到599之间的任何一个都是这种风格，这就是为什么你有三个盒子浮在左边，大小为30px x 30px。

然后，当您到600到767时，平板电脑媒体查询会添加宽度样式。

然后在768之后桌面媒体查询接管添加新的宽度样式。

在您引用的示例中，他们正在设置基本的移动样式，如此

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

这就是为什么他们得到600px以下的全宽列。

希望这有帮助。

Answer 3

你应该改变：

[class*="col-"] {
    float: left;
    padding: 15px;
}

到

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

您目前只使用＆＃34; min-width＆＃34;具有相同的值＆＃34;桌面＆＃34;至于＃34;平板电脑＆＃34;。您不需要第二个媒体查询。无论如何，所有媒体查询更改都应用于600px宽度。当然，保持单独的类可以很方便，但不会在您发布的代码中。为了在将来减少这样的问题，我建议你使用好的＆＃34; CSS重置＆＃34;并将样式从总体写入细节（特殊情况，如媒体查询用法）。

使用HTML / CSS在响应式设计中出现意外行为

3 个答案: