Question

我在我的网站上创建一个用户信息显示器，我希望能够做出响应。我之前使用过媒体查询，从未遇到过任何问题...但是，我尝试过的任何内容都没有用，包括将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);

             }
}

这是我与其他课程的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>

Answer 1

尝试使用Google Chrome并使用其开发人员工具。要查看媒体查询，请将设备更改为iPhone 5，然后再将其更改为ipad 3-4。你应该看到他们改变了。

如果您想在调整浏览器大小时看到它们发生变化，请使用

@media only screen 
and (min-width: 320px)
and (max-widht: 480px)

媒体查询根本不起作用

1 个答案: