Question

我正在编写静态网站并在本地进行测试。我编写了一个媒体查询来稍微改变布局，以便在智能手机上查看更好。通过媒体查询，我的目标是将文本和个人资料照片从一个并排改为一个跟随另一个。

我的问题是，当我在Chrome或Firefox上加载HTML文件并调整窗口大小时，布局不会改变，我无法弄清楚如何修复它。任何帮助将非常感激。在下面找到我的代码。

对于我的标准CSS我有这个（一个小片段）：

#about-text {
    /*A div containing paragraphs and a table*/
    display: inline-block;
    width: 50%;
}

#profile-photo {
    /*An img tag after the closing about-text div*/
    border: 4px solid #1abc9c;
    display: inline;
    float: right;
    margin: 8% 0% 0% 0%;
    max-width: 40%;
}

然后我有一个媒体查询和相应的CSS：

@media (min-device-width : 320px) and (max-device-width : 480px) {

#about-text {
    /*A div containing paragraphs and a table*/
    display: block;
    width: 50%;
}

#profile-photo {
    /*An img tag after the closing about-text div*/
    border: 4px solid #1abc9c;
    display: block;
    float: right;
    margin: 8% 0% 0% 0%;
    max-width: 40%;
}
}

Answer 1

您正在使用min-device-width和max-device-width，它只会考虑设备的屏幕大小。使用min-width和max-width，当你调整大小时它将在你的浏览器中工作。

示例：

.testDiv {
    color: green;
}

@media (min-width : 320px) and (max-width : 480px) {
    .testDiv {
       color: red;
   }
}

http://jsfiddle.net/ZUPD2/

Answer 2

可能是因为媒体查询块没有结束括号？

CSS媒体查询未加载

2 个答案: