CSS中的媒體查詢

我正在嘗試爲平板電腦應用CSS。片中有較大的顯示，但像素密度不高作爲例如iPhone 4，三星GALAXY Nexus等CSS中的媒體查詢

<link href="css/mobile-tablet.css" media="all and (min-device-width: 600px)" rel="stylesheet" type="text/css" />

如果我這樣做，智能手機也將獲得CSS。是否有可能以另一種方式做到這一點？我不知道是否可以以釐米爲單位檢查像素的數量和屏幕的物理寬度，或者是否有更好的方法。

來源

2012-03-01 LuckyLuke

在媒體查詢英寸/釐米是CSSinches/CSScentimeters。它們由標準來定義，並且可以與用尺子測量的結果大不相同。例如，一個CSSinch被定義爲96像素，並且只能用標尺測量的三分之一。好的部分是這意味着大量的遺留代碼繼續工作。但不太好的部分是，這也意味着像英寸或釐米等物理措施在媒體查詢中幾乎是無用的，最壞的情況是完全誤導。 – 2012-09-28 23:17:39

你可以嘗試這些媒體查詢，它可能會幫助你。

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" /> 
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

使用設備寬度的範圍內，你可以輕鬆地定位設備，我知道有很多的設備爲目標的，但一般而言，您的目標這樣的設備。

來源

2012-03-01 09:23:27 w3uiguru

但我不僅僅是針對iphone/ipads – LuckyLuke 2012-03-01 09:33:20

我剛剛給你舉例說明了在媒體查詢中使用設備寬度，我的意圖不是要告訴你專用於iPhone和iPad的方式，抱歉給您帶來不便。 – w3uiguru 2012-03-01 09:59:16

您可以定位與所述最小設備像素比查詢高像素密度器件像這樣：

<link rel='stylesheet' href='highres.css' media='all and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 600px), all and (min-device-pixel-ratio: 2) and (min-device-width: 600px)' />

這將目標的寬度的高分辨率顯示器上600px的

來源

2012-03-01 11:42:28

CSS中的媒體查詢

回答

相關問題