0

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

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

4

4 回答 4

2

简而言之，是的，它会的。相当大量。

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

如您所知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;
 }

背景将是粉红色的。

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

于 2012-12-10T20:56:18.423 回答
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

于 2012-12-10T20:59:26.553 回答
0

您应该首先放置移动和笔记本电脑的媒体查询。因为如果您使用 min-width:...px 例如，css 将被更大的屏幕覆盖，如果屏幕具有最小宽度，则不会被覆盖。

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

于 2012-12-10T20:58:05.367 回答
0

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

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

于 2014-01-09T16:13:49.047 回答