Html CSS媒体查询顺序

我有一个关于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="">

---

假设我的目标是台式机、笔记本电脑和带有多个媒体查询的移动设备。这会改变设计在多个设备上的显示方式吗？链接的顺序重要吗？

短的是肯定的，它会的。相当大

但它们有可能产生连锁反应

正如您所知，

层叠样式表

，顾名思义，层叠不同的样式

例如，如果您在

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

背景是粉红色的

---

按您希望项目在文档中层叠的顺序放置项目。除非您希望手机成为网站的默认版本，否则不要将手机放在桌面之前。

简短的回答是肯定的，它会的。相当大

但它们有可能产生连锁反应

正如您所知，

层叠样式表

，顾名思义，层叠不同的样式

例如，如果您在

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

背景是粉红色的

---

按您希望项目在文档中层叠的顺序放置项目。不要将手机放在桌面之前，除非您希望手机成为站点的默认版本。

您应该先放置mediaqueries for mobile&laptop。 因为如果使用min width:…px，css将被更大屏幕覆盖，而如果屏幕具有min width，css将不会被覆盖

例如，当最小宽度为0时，将使用mobile.css，最小宽度为700时使用laptop.css，最小宽度为1000时使用desktop.css。 如果屏幕宽度为800px，则将使用mobile.css和laptop.css，但不使用desktop.css。

---

如果换一种方式，mobile.css每次都会覆盖，因为每个屏幕的最小宽度为0px。

您应该首先放置移动和笔记本电脑的mediaqueries。 因为如果使用min width:…px，css将被更大屏幕覆盖，而如果屏幕具有min width，css将不会被覆盖

例如，当最小宽度为0时，将使用mobile.css，最小宽度为700时使用laptop.css，最小宽度为1000时使用desktop.css。 如果屏幕宽度为800px，则将使用mobile.css和laptop.css，但不使用desktop.css。

---

如果换一种方式，mobile.css将覆盖每次，因为每个屏幕的最小宽度为0px。

否，通常避免仅使用桌面或手持设备等媒体类型。众所周知，移动设备会伪造此查询，以便获得更好的样式表。使用更强大的媒体查询，指定屏幕分辨率、像素密度等。在样式表中，您可以执行以下操作：

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

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

规格：

教程：

---

否，通常避免仅使用桌面或手持设备等媒体类型。众所周知，移动设备会伪造此查询，以便获得更好的样式表。使用更强大的媒体查询，指定屏幕分辨率、像素密度等。在样式表中，您可以执行以下操作：

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

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

规格：

教程：

---

由于同一css的最后一个声明将覆盖上一个，因此它应该声明样式的超集，然后缩小其范围

比如说,，

---

所有桌面、移动设备的颜色通常相同，元素的大小也不同。

因为相同css的最后一个声明将覆盖之前的声明，所以它应该声明样式的超集，然后缩小其范围

比如说,，

---

所有桌面、移动设备的颜色通常相同，元素的大小也不同。

否。只需设置有效的

media

typeNO即可。只需设置有效的

媒体

类型