Question

我对CSS媒体查询有疑问。我的问题是我的css媒体查询的顺序是否会产生影响。

例如：

<link rel="stylesheet" href="desktop.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="mobile.css" media="">



<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="desktop.css" media="">

假设我要使用多个媒体查询来定位台式机，笔记本电脑和移动设备。这会改变设计在多个设备上的显示方式吗？链接的顺序是否重要？

Answer 1

简短是肯定的。相当大。

但他们有可能获得效果。

如您所知Cascading Style Sheets，正如其名称所暗示的那样，通过不同的风格进行级联。

例如，如果你在desktop.css中有样式，它们将展开到页面中的所有元素。然后laptop.css出现并有另一种desktop.css定位的风格，来自laptop.css的风格将成为先例。此外，适用于mobile.css

的样式

示例：

//Desktop.css
body {
      background: pink;
 }

//laptop.css
body {
      background: yellow;
 }

//mobile.css
body {
      background: green;
 }

如果没有媒体评论，则表示背景为绿色。

如果我们这样做：

//laptop.css
body {
      background: yellow;
 }

//mobile.css
body {
      background: green;
 }

//Desktop.css
body {
      background: pink;
 }

背景将是粉红色。

按照您希望它们在文档中级联的顺序放置项目。除非您希望移动设备成为您网站的默认版本，否则请勿将移动设备放在桌面之前。

Answer 2

否，通常避免仅依赖于使用台式机或掌上电脑等媒体类型。众所周知，移动设备会伪造此查询，因此可以获得更好的样式表。使用指定屏幕分辨率，像素密度等的更强大的媒体查询。在样式表中，您可以执行以下操作：

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background: #ccc;
  }
}

如果您的查询重叠，则它们会受到正常级联的影响，并且可以被覆盖。

规格： http://www.w3.org/TR/css3-mediaqueries/

教程： http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 3

你应该把媒体查询放在移动设备上。笔记本首先。因为如果你使用min-width：... px，那么对于更大的屏幕，将覆盖css，如果屏幕具有最小宽度，则不会覆盖css。

例如，将使用您的mobile.css，当min-width为0时，您的laptop.css为min-width 700，desktop.css为min-width 1000。如果您的屏幕宽度为800px，则将使用mobile.css和laptop.css，但不会使用desktop.css。如果你反过来这样做，mobile.css将每次覆盖，因为每个屏幕的最小宽度为0px。

Answer 4

由于同一个css的最后一个声明将覆盖前一个，所以它应该声明该样式的超集，然后将其缩小。

例如，对于所有桌面，移动和元素大小的颜色通常是相同的。

CSS媒体查询顺序

4 个答案: