CSS媒体查询命令

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

说我是瞄准台式机，笔记本电脑，并与多家媒体查询的移动设备。这是否会改变设计在多个设备上的显示方式？链接的顺序是否有问题？

来源

2012-12-10 JaPerk14

NO。只需设置有效的“媒体”类型 – diEcho

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

但是有可能会产生敲门效应。

如你所知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-10 20:56:18

你应该首先将移动&笔记本电脑mediaqueries。因为如果使用min-width：... px例如，对于更大的屏幕，css将被覆盖，并且如果屏幕具有最小宽度，则不会覆盖css。

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

来源

2012-12-10 20:58:05 andy

不，并且通常避免仅取决于使用桌面或手持设备等媒体类型。已知移动设备伪造此查询，以便他们获得更好的样式表。如果查询重叠，他们受到正常的级联，可以覆盖

@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-10 20:59:26 piatek

由于相同的CSS的最后声明将覆盖前面的，所以应该宣布风格的超集，然后缩小范围。

例如，颜色对于所有的桌面，手机和大小的元素都是不同的。

来源

2014-01-09 16:13:49 Kelvin

CSS媒体查询命令

回答

相关问题