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媒體查詢命令

回答

相關問題