CSS媒体查询不加载

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

我的问题是，当我在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%; 
} 
}

来源

2014-07-27 Finn LeSueur

您正在使用最小设备宽度和最大设备宽度，该设备宽度仅记录设备的屏幕大小。使用最小宽度和最大宽度，当您调整大小时，它可以在浏览器中运行。

例子：

.testDiv { 
    color: green; 
} 

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

http://jsfiddle.net/ZUPD2/

来源

2014-07-27 11:16:43

谢谢！这很好。在使用最大/最小设备宽度和最大/最小宽度之间，哪些功能发生了变化？这不会再做什么特别的事情吗？它的工作原理是什么？ –

不同的网络浏览器变幻莫测，有些只支持其中一种查询。我无法真正想到为什么您需要使用设备宽度而不是宽度的很多原因，除非您想要在缩放或调整窗口大小时更改样式。本文建议使用两者来覆盖您的基础，我同意。 http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/ –

也许是因为没有右括号为媒体查询块？

来源

2014-07-27 11:12:38 minychillo

道歉 - 我不小心留下的是支架提离，当我从我的编辑对面复制。谢谢你。 –

CSS媒体查询不加载

回答

相关问题