Question

我是CSS媒体查询的新手，每当移动设备使用它时，我首先尝试使用pdf / mp3 / mp4按钮集中在此页面上（http://www.mannachurch.org/portfolio-type/recycled-junk/）。请记住，我正在使用高度修改的wordpress主题。

所以我尝试过试验来解决这个问题。但是，我似乎无法控制使用媒体查询，即使在这个简单的HTML文件中我甚至无法执行任何操作：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">

body{background-color: blue;}

@media only screen and (min-device-width : 599px) and (max-device-width : 600px) {
    body {background-color:black;
    }
}

</style>
</head>

<body>
<p>This is an experiment<p/>
</body>

</html>

我做错了什么？

Answer 1

您的媒体查询只留下一个像素范围。 599到600之间。你会想要这样的东西：

@media only screen and (max-device-width : 600px) {
    body {background-color:black;
    }
}

Answer 2

在标记中添加viewPort元标记。

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

以下是参考：http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

Answer 3

你可以修复宽度属性，因为你有1px差异

min-device-width : 599px
max-device-width : 600px

Answer 4

我找到了一个有效的解决方案。这个问题是由我试图在wordpress中定制的主题引发的。 wordpress中的编辑器非常难以置信。至少现在我知道我正在进行CSS媒体查询。这是有用的：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style type="text/css">

/*-- EUREKA!!! IT works! */

body{background-color: blue;}

@media all and (min-width: 250px) and (max-width: 400px) {

        body{ 
        background-color:black;
                }

    }

@media all and (min-width: 640px) and (max-width: 760px) {

        body{ 
        background-color:black;
                }

    }

    @media all and (min-width: 768px) and (max-width: 1024px) {

        body{ 
        background-color:black;
                }

    }

</style>
</head>

嵌入式CSS媒体查询不起作用

4 个答案: