Question

正如标题所说，我不能为我的PHP网页设置特定于媒体屏幕宽度的CSS。

以下是我<head>的{{1}}部分：

index.php

对于我的HTML元素<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" />   <script type='text/javascript' src='scripts/respond.min.js'></script>  <link type="text/css" rel="stylesheet" href="style.css"/> </head>，在我的CSS（<header> ... </header>）中，我指定了：

style.css

但是使用“Web Developer”工具栏的调整大小»查看响应式布局会显示不同宽度的设备布局。

例如：
在我的header{ background: #1e5799; min-height: 40px; max-height: 136px; }标签中，内部元素已经退出，因此我需要增加标头的高度。所以我在<header>中指定了：

style.css

但它不起作用。：（

我对响应式CSS缺少什么？

修改

在前两个答案之后，根据他们的建议，我尝试使用：

/* Media Queries for Different Types of Mobile Devices */

/* Mobile portrait (320 x 480) */

@media all and (max-device-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

是的，我将媒体CSS放在@media screen and (max-width: 320px) { header{ height: 136px !important; background-color: #FF0000; } }的底部。

我也尝试将style.css分隔为：

mobile.css

我尝试放置以下代码：

<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />

仍然没有用。

Answer 1

开发时，max-device-width无法帮助您直观显示窗口大小调整的更改，因为此特定媒体查询的目标是实际的设备大小（在您的计算机上，它将是您的监视器，而不是浏览器窗口）。

另一方面，max-width以浏览器窗口宽度为目标，因此可以完美地调整大小。

除非您想要专门针对较小的设备（并且没有对窗口调整大小做出响应），否则我建议改为使用max-width。

Answer 2

在所有设备上获得响应式布局时，请检查http://codepen.io/anon/pen/iFCHj我通常max-width而不是max-device-width。

此外，请确保您的自适应布局位于主布局下方，否则浏览器将忽略媒体，除非在所有内容上设置了！important。

Answer 3

除了其他好的建议外，如果你检查完整标题的样式

header{
background: #1e5799; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzU0NzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #1e5799 0%, #135471 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#135471)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#135471 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#135471 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#135471',GradientType=0 ); /* IE6-8 */

/*border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -o-border-radius: 8px 8px 0 0;
 */
min-height: 40px;
max-height: 136px;
}

因此，对于320 px视口，除了为高度和背景颜色编写新的标记外，还需要覆盖背景图像和IE过滤器

删除IE过滤器，例如

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

应该是好的。你可以找出背景渐变。

祝你好运！

为什么我的响应式CSS不占用媒体宽度？

修改

3 个答案: