Question

我正在使用媒体查询来编辑网站的某些元素以供移动使用。我知道特定于媒体的样式表是有效的，但是特定的元素似乎没有编辑。有谁知道为什么会这样？我已经粘贴了样式开始标记以及相关元素的两个版本。

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

#home-content { /* small device stylesheet */
    position:absolute; width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

#home-content { /* regular stylesheet */
    position:absolute; width:30%;
    bottom:65px; left:0%; padding:35px 45px 35px 45px;
    background:url(/img/content-background.png) repeat;
}

任何帮助都会很棒！谢谢你们。

Answer 1

这是文档头部样式表的顺序：

<link rel="stylesheet" href="/small-devices.css" media="only screen and (max-device-width: 1000px)" type="text/css" />
<link rel="stylesheet" href="/wp-content/themes/twentythirteen/style.css" type="text/css">
<link rel='stylesheet' id='genericons-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/fonts/genericons.css?ver=2.09' type='text/css' media='all' />
<link rel='stylesheet' id='twentythirteen-style-css'  href='http://chefpaulcrowe.com/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />

这将导致small-device.css被任何具有相同或更高特异性的规则所覆盖。您应该移动small-devices.css以在标题中打印较低的值，或者增加选择器的特异性。例如：

body #home-content { /*Some CSS*/ }

将覆盖：

#home-content { /*Some CSS*/ }

无论订单如何。

此外，在您的实例中，您没有在#home-content上设置宽度。

在small-devices.css（http://chefpaulcrowe.com/small-devices.css）中，您有此代码。

#home-content {
    position:absolute; max-device-width:700px;
    bottom:165px; left:0%; padding:35px 45px 35px 45px;
    background:red;
}

此属性：

max-device-width:700px;

应该是这样的：

width:700px;

媒体查询影响某些元素，而不影响其他元素

1 个答案: