Question

我绝望了。我正在尝试建立一个网站，使其适合移动设备和响应，但是，我似乎无法获得任何类型的媒体查询工作！我的所有尺寸，宽度和高度都在“％/ em”中，而我的字体大小在“vw / em”中。我得到的最大问题是，随着屏幕缩小，我的文字也会缩小，直到它变得让人眼前一亮！我认为发送任何代码并不相关，但如果需要，我会发送一些代码（我的网站仍处于脱机状态，如果不能解决此问题，我不能把它放在那里）。

以下是我的尝试：

我试过把它放在我的标签中：

<html>

<head>
<title> HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE!  </title>
 <meta name="description" content ="Website for the game mirrors edge 2" />
 <meta name="author" content="---" />
 <meta name="copyright" content="&copy;2015" />
 <!-- specify a base formatting style sheet file-->
 <link rel="stylesheet" type="text/css" href="base.css" />
 <!-- specify a local formatting style sheet for this page-->
 <style>
  body {background-color : light-grey; color : silver;}
 </style>



</head>
<body>
<table>
<caption> Mirrors edge 2 </caption>
<tr>

<td><a href="Home.html"> Home </a></td>
<td><a href="Comments.html">Commments</a></td>
<td><a href="Story.html">Story</a></td>
<td><a href="WWK.html">What we know</a></td>
<td><a href="Hype.html">Hype!</a></td>
<td><a href="list.html">List of Characters</a></td>
<td><a href="Studio.html">The Studio</a></td>
</tr>
</table>

<header> <h2> I can't wait </h2>
<p>It's going to be so good</p>
</header>

<h1> GET STOKED </h1>

<table>
<caption> HYPE </caption>
<tr>
<td><img src"hype1.gif"></img></td>
<td><img src"hype2.gif"></img></td>
</tr>
<tr>
<td><img src"faith3.jpg"></img></td>
<td><img src"logo.jpg"></img></td>
</tr>
</table>

<h3> My Sub sub heading </h3>
<br />
my text my text my text
</br>
<a href="Home.html">Return</a>


</body>

</html>

在标签页或单独的css样式表中尝试媒体查询时没有成功。

我也尝试过删除它。

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

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

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

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

提前感谢您的帮助！

Answer 1

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

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

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就会显示颜色会发生变化。它并没有带来多少好处，但它是开始使用媒体查询的一种方式。

修改

Pen包含颜色之间的转换，因为很酷

媒体查询根本无法正常工作

2 个答案: