Question

我有三个不同大小的设备的这三个CSS链接。

<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth959.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth768.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth600.css" rel='stylesheet'>

媒体查询所有人：

maxwidth959.css

 @media only screen and (max-width: 959px)
 {
   // styles here
 }

maxwidth768.css

@media only screen and (max-width: 768px)
{
  // styles here
}

maxwidth600.css

@media only screen and (max-width: 600px)
{
    // styles here
}

但只有最后一个链接的css（maxwidth600.css）CSS正在生效，其他人是否重写？

Answer 1

您的代码本身没有任何问题，假设所有三个CSS链接确实指向正确的位置并正确加载文件。

如果您只看到最终（最小）媒体查询中应用的样式，我认为您的媒体查询在选择器中都包含相同的属性 specificity。重要的是要认识到特异性的一个不可或缺的方面是，在＆＃39; tie＆＃39;的情况下，DOM具有最终发言权。 DOM（和渲染的CSS）从从上到下读取。

当您以较小的宽度查看网站（属于多个媒体查询）时，媒体查询会顺序执行。这是一个例子：

＆＃13;

@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}

＆＃13;

<div id="media">Change me!</div>

＆＃13;

请注意，text-decoration是从第一次媒体查询中应用的，但font-size会被第二次媒体查询覆盖。

我们可以通过更改媒体查询的顺序来修改此行为：

＆＃13;

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}
@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

＆＃13;

<div id="media">Change me!</div>

＆＃13;

注意现在如何从第二个媒体查询应用两者 font-size和text-decoration。从最小的媒体查询开始可以帮助确保网站在移动设备上看起来很棒，并且被称为mobile-first开发。

由于您在HTML中按顺序959，768，600添加了三个CSS文件，因此它们以相同的顺序呈现。因此，与maxwidth600.css和maxwidth768.css中指定的规则相比，maxwidth959.css中指定的规则具有更高级别。

根据您希望在哪些断点处应用哪种样式，您有三种选择：

在其他媒体查询中同时指定min-width和max-width，从移动视图中排除其他媒体查询
显示更广泛的规则＆＃39;媒体查询通过给予他们更高水平的特异性
切换到移动优先开发

希望这有帮助！：）

Answer 2

试试这个：

<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/maxwidth959.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/maxwidth768.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/maxwidth600.css" rel='stylesheet'>

Answer 3

如果我没有错，你想尝试创建一个动态或响应式页面，这样你就可以尝试像我这样非常简单的解决方案。

1-创建CSS文件并放置所有样式，即“MyStyle.css”并将所有媒体查询放入其中。

2-用您的CSS文件链接您的页面，我正在使用外部链接。

检查一下并试试这个：

“MyStyle.css”

@media only screen and (max-width: 959px){.ch{ color: red;}}
@media only screen and (max-width: 768px){.ch{color: blue;}}
@media only screen and (max-width: 600px){.ch{color: green;}}

“的index.php”

<!DOCTYPE html>
<html>
    <head>
        <title>Your title</title>
        <link href="./css/mytyle.css" rel="stylesheet">
    </head>
<body>
    <h1 class="ch">Use simple solutions.</h1>

    <?php
        $string = "Object Oriented Programming in PHP";
        echo "<h1 class='ch'>" . $string . "</h1>"; 
    ?>
</body>
</html>

希望我能帮助你，如果我有任何语法或拼写错误，我很抱歉。

Answer 4

我的想法是，因为你的代码从上到下阅读，而maxwidth600.css低于其他两个文件，它只从这个文件中获取样式，因为无法检查要读取的文件（来自3个媒体查询文件））关于浏览器的当前大小。您可以尝试做的是将所有查询放在同一个文件中，或者根据浏览器的宽度找到仅链接文件的方法。

Answer 5

首先，检查每个加载的CSS文件。如果在Firefox中，右键单击，检查元素，然后单击网络选项卡和CSS选项卡。刷新页面。这三个文件都加载好吗？如果是这样，他们将收到HTTP 200响应。

接下来，这些媒体查询针对不同大小的浏览器窗口，一次只有一个会生效。所以，拖动你的窗口＆lt; 600px，然后使其更大但是＆lt; 768px，最后宽度为959像素。如果您已正确完成，则在拖动窗口时将会启用不同的CSS规则。

希望这有帮助！

只有css的最后一个链接才生效

5 个答案:

检查一下并试试这个：