媒体查询根本不工作

我处于绝望之中。我正在尝试创建一个网站，并使其适合移动设备和响应式，但是，我似乎无法获得任何媒体查询的功能！我所有的尺寸，宽度和高度都在“％/ em”中，我的字体大小是“vw/em”。我得到的最大问题是，随着屏幕缩小，我的文本也缩小了，直到它变得眼花缭乱才能阅读！我不认为相关的发送任何代码，但如果需要的话，我会发送一些我的代码（我的网站仍然是离线的，如果这个问题没有解决，我不能把它放在那里）。媒体查询根本不工作

这是我曾尝试：

我试图把这个在我的标签：

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

没有，当我尝试在标签或在一个单独的CSS样式表媒体查询成功。

我试过去除它。

我尝试了这些媒体查询我的字体大小：

@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%;} 
}

我也尝试过其他媒体的质疑，但绝对什么都没有改变！难道我做错了什么？可能但是什么？！这导致了很多问题！我不能改变我的标题根据不同的屏幕尺寸，我不能改变我的显示，我的标题链接是一团糟等

另外，请注意，我是一个初学者，我不使用任何JavaScript，引导或任何。

非常感谢您的帮助！

来源

2015-05-12 00 00

你的查询是有点怪异。也许有一些合乎逻辑的限制，你可以达到你要找的东西？这就是我的意思是：

@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显示颜色随着您改变宽度而改变。它没有太大的好处，但是这是媒体查询的开始。

编辑：

笔包含因为酷

来源

2015-05-12 04:51:26

这很奇怪，我以前也尝试过你提出的方法，但它没有回到那时......现在它确实如此。这可能是因为我在媒体查询中添加了“屏幕”...？无论如何，谢谢你，现在它创造奇迹！我仍然有很多问题需要解决，但我想我会问另一个问题= D！谢谢！ –

也许你有一些语法问题，谁知道......添加屏幕应该不会改变任何事情，一切都停止工作。 –

想到这一点，它只是没有意义。我发现，当我尝试将我的媒体查询脚本放在我的头标记中而不是我的CSS样式表中时，它的工作原理...我认为这可能是我的错误。 –

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

Codepen：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%;} 
}

来源

2015-05-12 03:26:52 ollierexx

颜色之间的过渡哦，我刚才明白你的“最小宽度”是什么意思！我曾尝试过，但我认为我的语法错误。谢谢！另一个答案更精确一些，因为我喜欢有一个实际的代码示例，但是感谢您的帮助。 =） –

媒体查询根本不工作

回答

相关问题