html - CSS 媒体查询未加载

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-width 和 max-width，当你调整大小时它会在你的浏览器中工作。

例子:

.testDiv {
    color: green;
}

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

http://jsfiddle.net/ZUPD2/