只有css的最后一个链接起作用

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链接确实指向正确的位置并正确加载文件.

通过您只看到从最终(最小)媒体查询应用样式,我假设您的媒体查询都包含具有相同特异性级别的选择器内的相同属性.重要的是要认识到特异性的一个不可或缺的方面是,在"平局"的情况下,DOM具有最终发言权.DOM(和渲染的CSS)从上到下读取.

当您以较小的宽度查看网站(属于多个媒体查询)时,媒体查询将按顺序执行.这是一个例子:

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

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}

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

请注意,它text-decoration是从第一个媒体查询应用的,但是font-size被第二个媒体查询覆盖.

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

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

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

请注意如何都将font-size和text-decoration现在从第二媒体查询应用.从最小的媒体查询开始可以帮助确保网站在移动设备上看起来很棒,并且被称为移动优先开发.

因为您在命令你的三个CSS文件959,768,600在你的HTML,他们呈现在这个相同的顺序.因此,在指定的规则maxwidth600.css将有一个更高水平的特异性比这两个特定的规则maxwidth768.css和maxwidth959.css.

根据您希望在哪些断点处应用的样式,您有三个选项:

1. 通过在其他媒体查询中指定a min-width和a max-width,从移动视图中排除其他媒体查询
2. 通过赋予它们更高水平的特异性,从"更广泛的"媒体查询中显示一些规则
3. 切换到移动优先开发

希望这可以帮助!:)