條件語句的屏幕分辨率？

我想用一個條件語句來連接不同的樣式表爲：條件語句的屏幕分辨率？

if the clients resolution is <= 1024*768

我敢肯定，這是可能的，但在此之前從未見過的代碼呢？

ps。我不是在尋找一個JavaScript解決方案

2010-07-07 Haroldo

CSS 3引入了media queries，但它是新的，並且支持並不是那麼普及（例如，Firefox只在3.5版中引入了它，並且Internet Explorer將不會獲得它，直到版本9），所以建立在腦海中的漸進增強。 CSS技巧有一個教程，提供different CSS for different browser window sizes（這是一個更有用的指標，然後顯示分辨率）。您可以測試support for your browser。

來源

2010-07-07 12:26:13 Quentin

是的，很遺憾1024 * 768與舊瀏覽器（無css3）之間存在很強的關聯性！ - 隨着上網本不斷上升res-css correllation可能會發生變化 – Haroldo 2010-07-07 12:34:12

因此，針對狹窄的顯示器進行構建，並使用媒體查詢來檢測更寬的窗口並覆蓋佈局。 – Quentin 2010-07-07 12:44:27

更新：自2010年以來發生了很大變化，現在CSS媒體查詢幾乎全球接受並在所有主流瀏覽器上受支持 – 2017-11-19 08:18:56

有這個選項，完全客戶端和JavaScript驅動，添加腳本標籤：

<script type="text/javascript"> 

if (screen.height < 900) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>'); 

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>'); 

} 

</script>

你甚至可以添加對智能手機和平板電腦等if語句。

來源

2012-10-20 01:47:59 frenchie

他要求提供非JavaScript解決方案。 – 2014-05-31 04:11:54

通常情況下，人們不會爲屏幕分辨率「附加另一個樣式表」，因爲您可以在頁面加載後更改瀏覽器大小，更改分辨率，並且每次都不需要加載文件。當

/* css as usual */ 
.this-class { font-size: 12px; } 

/* condition for screen size minimum of 500px */ 
@media (min-width:500px) { 

    /* your conditional/responsive CSS inside this condition */ 

    .this-class { font-size: 20px; } 

}

這應該改變字體大小20像素時@media查詢條件爲真，在這種情況下：

這將這樣的伎倆，在一個CSS文件：

防爆屏幕超過500像素。

當你上下瀏覽器時，你會看到條件CSS規則會自動生效，不需要JS。

來源

2014-05-31 04:10:34

很好的答案，upvoted：D – ncomputers 2017-05-27 03:54:21

條件語句的屏幕分辨率？

回答

相關問題