0

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

这是我的<head>部分index.php：

<!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;" /> <!-- for responsive coding, the "Viewport" meta tag -->

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type='text/javascript' src='scripts/respond.min.js'></script> <!-- for responsive mobile themes -->

    <link type="text/css" rel="stylesheet" href="style.css"/>        
        
</head>

对于我的 HTML 元素<header> ... </header>，在我的 CSS (in style.css) 中，我指定：

header{
    background: #1e5799;
    min-height: 40px;
    max-height: 136px;
}

但是使用“Web Developer”工具栏的Resize » View Responsive Layouts在不同宽度的设备布局中显示出一些下降。

例如：
在我的<header>标签中，内部元素都出来了，所以我需要增加表头的高度。所以我指定style.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 缺少什么？

编辑

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

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

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

}

是的，我将我的媒体 CSS 放在style.css.

我还尝试将mobile.cssas 分开：

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

我尝试放置以下代码的地方：

header{
    height: 130px;
}

仍然无法正常工作。

4

3 回答 3

3

在开发过程中，max-device-width不会帮助您可视化调整窗口大小的变化，因为此特定媒体查询针对的是实际设备大小（在您的计算机上，它将是您的显示器，而不是浏览器窗口）。

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

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

于 2013-09-14T10:57:47.363 回答
2

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

此外，请确保您的响应式布局位于主布局下方，否则浏览器将忽略媒体，除非全部设置了 !important。

于 2013-09-14T10:53:22.813 回答
1

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

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);

应该不错。您可能可以找出背景渐变。

祝你好运！

于 2013-09-14T13:13:40.350 回答