<分区>
关闭 8 年前。
- 这个问题是由于打字错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。
- 编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
<分区>
关闭 8 年前。
我正在尝试在我的网站上创建一个我想要响应的用户信息显示。我以前使用过媒体查询，从来没有遇到过任何问题......但是，我尝试的任何事情都没有奏效，包括将 id 更改为类和使用 div 布局(例如绝对、相对......)。
这是我的CSS:
#profile_container {
position: relative; margin: 0 auto;
top: 0px; left: 0px; width: 1400px; height: 180px; overflow: hidden;
background: rgba(237,237,237,1);
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
#profile_container {
position: relative; margin: 0 auto;
top: 0px; left: 0px; width: 300px; height: 100px; overflow: hidden;
background: rgba(237,237,237,1);
}
}
这是我的其他类(class)的 html。其他类不包含任何宽度信息，只有文本属性。
<div id="profile_container">
<div class="profile_picture_large round_profile_pic_large">
<img src="images/profiletest.jpg" />
</div>
<div class="profile_followers_rotate">24 <div class="profile_followers_rotate_small">followers!</div></div>
<div class="welcome_text">Hello...</div>
<div class="profile_name">Andy Rob Robinson</div>
最佳答案
尝试使用谷歌浏览器并使用其开发者工具。 要查看您的媒体查询，请将设备更改为 iPhone 5，然后再更改回 ipad 3-4。您应该会看到它们发生变化。
如果您想在调整浏览器大小时看到它们发生变化，请使用
@media only screen
and (min-width: 320px)
and (max-widht: 480px)
关于html - 媒体查询根本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27023322/