媒体查询根本不起作用

Question

我很绝望。我正在尝试制作一个网站并使其 mobile-friendly 并具有响应能力，但是，我似乎根本无法使用任何类型的媒体查询！我所有的尺寸、宽度和高度都在“%/em”中，我的 font-sizes 在 "vw/em" 中。我遇到的最大问题是，随着屏幕缩小，我的文字也会缩小，以至于它变得 eye-straining 无法阅读！我看不到发送任何代码的相关性，但如果需要，我将发送我的一些代码（我的网站仍处于离线状态，如果此问题未解决，我无法将其发布）。

这是我尝试过的方法：

我试过将其放入我的标签中：

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

当我在选项卡或单独的 css 样式表中尝试媒体查询时没有成功。

我也试过删除它。

我已经为我的 font-sizes 尝试了这些媒体查询：

@media (max-width: 400px) {
    body { font-size: 60%;}
}

@media only screen and (max-device-width: 800px) {
    body { 
        font-size: 80%;
        background-color: blue;  
    }

}

@media (max-width: 1100px) {
    body { font-size: 120%;}
}

我也尝试过其他媒体查询，但绝对没有任何变化！难道我做错了什么？可能但是什么？！这导致了很多问题！我无法根据不同的屏幕尺寸更改我的 header，我无法更改我的显示，我的 header 链接乱七八糟等等

此外，请注意我是初学者，我不使用任何 javascript、bootstrap 或其他任何东西。

提前感谢您的帮助！

Answer 1

通常，最好使用基于最小屏幕宽度的媒体查询。这是您发布的代码的工作示例：

代码笔：http://codepen.io/anon/pen/eNJXXp

@media (max-width: 400px) {
    p { font-size: 60%;}
}

@media (min-width: 400px) {
    p { 
        font-size: 80%;
        background-color: blue;  
    }

}

@media (min-width: 800px) {
    p { font-size: 120%;}
}

Answer 2

您的查询有点奇怪。也许通过一些逻辑约束你可以实现你正在寻找的东西？这就是我的意思：

@media (max-width: 400px) {
    body{
        background-color: yellow;
    }
}

@media (min-width: 401px) and (max-width: 800px){
    body { 
        background-color: blue;  
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    body { 
        background-color: purple;
    }
}

@media (min-width: 1101px){
    body{
        background-color: orange;
    }
}

以我的拙见，同时使用 min-width 和 max-width 设置间隔有助于我更好地想象发生了什么。此 pen 显示每当您更改宽度时颜色都会发生变化。它没有多大用处，但它是媒体查询入门的东西。

编辑：

笔包含颜色之间的过渡，因为很酷

媒体查询根本不起作用

Media Queries not working at all whatsoever

html

css

media