媒体查询似乎没有工作？

问题描述：

我确定我可能在这里做错了，但我的媒体查询似乎没有在这个主要基于bootstrap的新网站上工作。媒体查询似乎没有工作？

在我的HTML表我已经放在head标签内：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后在我的CSS我有这样的事情：

移动CSS

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    h1 { 
    font-family: 'Lato', sans-serif; 
    font-style: normal; 
    color: #000000; 
    font-size: 6.5vw; 
    letter-spacing: 0.50em; 
    margin-left: 3%; 
    } 
    h2 { 
    font-family: 'Lato', sans-serif; 
    font-style: normal; 
    color: #000000; 
    font-size: 1.5vw; 
    letter-spacing: 0.25em; 
    } 
}

任何帮助将非常感谢，谢谢！

首先，我会检查，以确保您正在编辑的CSS文件插入你的页面头部的最后一个css文件。如果下面有其他人，他们可能会覆盖您的更改。 –

同意@MichaelMcCoy ..当屏幕尺寸在320px和480px之间时，这些样式应该适用于所有h1＆h2标签。如果没有，还有其他的CSS覆盖这些样式。另外，确保你的其他样式不在你的CSS中使用'！important'声明。 –

您是否在移动设备/设备模拟器上测试过此功能，因为您不会看到任何其他更改。以防万一，请参阅https://*.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web。 – vanburen

答

写这样

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

媒体查询似乎没有工作？

相关推荐