Fatal编程技术网
  • html/
  • 使用HTML/CSS的响应式设计中的意外行为

使用HTML/CSS的响应式设计中的意外行为

html css responsive-design

使用HTML/CSS的响应式设计中的意外行为,html,css,responsive-design,Html,Css,Responsive Design,我正在学习响应式网站设计，在我自己的原创代码中遇到了意想不到的行为 我的指导来源是-> 在这种情况下，如果尝试将内容减少到低于600px，则每个div将变成100%，并覆盖整个水平位置。因此，我假设这是响应设计的正常行为 但在我自己编写的代码中，如果我尝试小于600px，它不会占据整个100%。它会变成一个小的内容块。你可以在chrome inspect中检查它或调整大小。可能出了什么问题？我有没有漏掉申报单 这是我自己的代码 <!DOCTYPE html> <html>

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

我的指导来源是-> 在这种情况下，如果尝试将内容减少到低于600px，则每个div将变成100%，并覆盖整个水平位置。因此，我假设这是响应设计的正常行为

但在我自己编写的代码中，如果我尝试小于600px，它不会占据整个100%。它会变成一个小的内容块。你可以在chrome inspect中检查它或调整大小。可能出了什么问题？我有没有漏掉申报单

这是我自己的代码

<!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>


* {
框大小：边框框；
}
[类别*=“列-”]{
浮动：左；
填充：15px；
}
html{
字体系列：“Lucida Sans”，无衬线；
}
@仅介质屏幕和（最小宽度：600px）{
/*对于平板电脑：*/
.col-m-1{宽度：8.33%；}
.col-m-2{宽度：16.66%；}
.col-m-3{宽度：25%；}
.col-m-4{宽度：33.33%；}
.col-m-5{宽度：41.66%；}
.col-m-6{宽度：50%；}
.col-m-7{宽度：58.33%；}
.col-m-8{宽度：66.66%；}
.col-m-9{宽度：75%；}
.col-m-10{宽度：83.33%；}
.col-m-11{宽度：91.66%；}
.col-m-12{宽度：100%；}
}
@仅介质屏幕和（最小宽度：768px）{
/*对于桌面：*/
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
}
.box1{
背景色：红色；
}
.box2{
背景颜色：绿色；
}
.box3{
背景颜色：蓝色；
}
您没有用于
最大宽度：600px
及以上的媒体选择器，您可以将所有div设置为
float:left
，这将导致它们显示为100%，因此，在时，您没有用于
最大宽度：600px
及以上的媒体选择器，您可以将所有div设置为
float:left
，这将导致它们的注释为100%，因此在时，Trey是正确的。您在这里学到的是移动第一响应设计。所以你的手机基本风格是

[class*="col-"] { float: left; padding: 15px; }
任何介于0和599之间的都将是这种样式，这就是为什么有三个框以30px 30px的大小浮动到左侧

然后，当达到600到767时，tablet media query会添加宽度样式

768之后，桌面媒体查询将接管添加新宽度样式的工作

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

 [class*="col-"] { width: 100%; }
这就是为什么它们的全宽列低于600px

希望这能有所帮助。

Trey是正确的。您在这里学到的是移动第一响应设计。所以你的手机基本风格是

[class*="col-"] { float: left; padding: 15px; }
任何介于0和599之间的都将是这种样式，这就是为什么有三个框以30px 30px的大小浮动到左侧

然后，当达到600到767时，tablet media query会添加宽度样式

768之后，桌面媒体查询将接管添加新宽度样式的工作

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

 [class*="col-"] { width: 100%; }
这就是为什么它们的全宽列低于600px

希望这有帮助。

您应该更改：

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

您当前使用的“最小宽度”与“桌面”和“平板电脑”的值相同。您不需要第二次媒体查询。所有媒体查询更改都从600px宽度开始应用。当然，保留单独的类可能很方便，但在您发布的代码中就不行了。为了在将来减少此类问题，我建议您使用良好的“CSS重置”，并从总体到细节（特殊情况，如媒体查询使用）编写样式。

您应该更改：

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

您当前使用的“最小宽度”与“桌面”和“平板电脑”的值相同。您不需要第二次媒体查询。所有媒体查询更改都从600px宽度开始应用。当然，保留单独的类可能很方便，但在您发布的代码中就不行了。为了在将来减少此类问题，我建议您使用良好的“CSS重置”，并从总体到细节（特殊情况，如媒体查询使用）编写样式。

我明白您的意思，但在我的指导资源中，如何克服它而不声明最大宽度和声明浮动：左？我明白您的意思，但是，在我的指导源代码中，如何克服它而不声明最大宽度以及声明的浮点：left？Lolz。。。我错过了那个宣言…不管怎样，你完美地指出了我的错。谢谢！哈哈。。。我错过了那个宣言…不管怎样，你完美地指出了我的错。谢谢！