这些 CSS 媒体查询有什么问题？ - 或者和我一起。一定是我们两个人中的一个有错

问题描述 投票：0回答：1

所以，据我所知，我的代码〜应该〜工作。但事实并非如此。 Chrome 的开发人员工具向我显示，我的浏览器正在识别 >501px 条件并应用 CSS，但不能识别较小视口条件。我以为这可能是一个奇怪的浏览器缓存问题，但不是……它发生在一个用于演示该问题的简化页面上，在 Safari 上也是如此。

所以，经过 2 天的网络构建，并一路上取得了如此多更复杂的胜利，我被这个看似简单而不简单的事情难住了。

有人可以帮我摆脱痛苦并告诉我为什么当浏览器变薄时这不会使 div 浮动吗？

an image showing the problem in using Chrome

<html>
<head>
<style>

#aboutblock { 
    width:90%;
    margin: 5% auto;
    text-align:justify;
    }


@media all and (min-width: 501px) { 
#aboutblock img {
    float:left; 
    width:400px; 
    margin:1%;
    margin: 0% 3% 2% 0%;
    }

}


@media all and (max-width: 500px) { 
#aboutblock img {
    float:none;
    width:277px; 
    margin:1%;
    margin: 0% 3% 2% 0%;
        
     } 
        
}
    
</style>
</head> 
        
    </body>
        <div class="blockcontainer">
            <div id="aboutblock">
                
                <img src="https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJvd2xfbmlnaHRfb3dsX2FuaW1hbC1pbWFnZS1reWJjeWVqaS5qcGc.jpg" />
            
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien odio, sollicitudin a dolor at, sodales etc etc etc...</p>
            
                <p>Suspendisse potenti. Donec molestie aliquam lacus at laoreet. Donec justo risus, euismod quis augue a, etc etc etc...</p>
            
                <p>Sed efficitur rhoncus tristique. Sed vulputate, velit quis auctor convallis, erat lacus tincidunt sem, etc etc etc... </p>

            </div>
        </div>
    <body>
</html>

至于“如何”、“为什么”、“我做了什么？”……我当时正在建立一个网站，太累了，现在我什至找不到解决这个看似小事的方法，这是这肯定是我终于要睡一觉的暗示了。 ...而且，我现在对此太慌张了！

我为我正在构建的网站的相关部分制作了一个小型的、经过清理的版本，以确保问题不存在冲突等。我不是。

测试用例在这里。 https://generous-tiger.static.domains/testpage

老实说，我希望我在这里遗漏了一些明显的东西，只是希望有人能让我摆脱痛苦！

css image media-queries css-float media
1个回答
0
投票

正如评论中所建议的，添加 viewport 元标记后，它可以按预期工作，包括移动设备视图：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>

#aboutblock { 
    width:90%;
    margin: 5% auto;
    text-align:justify;
    }


@media all and (min-width: 501px) { 
#aboutblock img {
    float:left; 
    width:400px; 
    margin:1%;
    margin: 0% 3% 2% 0%;
    }

}


@media all and (max-width: 500px) { 
#aboutblock img {
    float:none;
    width:277px; 
    margin:1%;
    margin: 0% 3% 2% 0%;
        
     } 
        
}
    
</style>
</head> 
        
    </body>
        <div class="blockcontainer">
            <div id="aboutblock">
                
                <img src="https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZnJvd2xfbmlnaHRfb3dsX2FuaW1hbC1pbWFnZS1reWJjeWVqaS5qcGc.jpg" />
            
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien odio, sollicitudin a dolor at, sodales etc etc etc...</p>
            
                <p>Suspendisse potenti. Donec molestie aliquam lacus at laoreet. Donec justo risus, euismod quis augue a, etc etc etc...</p>
            
                <p>Sed efficitur rhoncus tristique. Sed vulputate, velit quis auctor convallis, erat lacus tincidunt sem, etc etc etc... </p>

            </div>
        </div>
    <body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.