如何在CSS中獲取當前屏幕寬度？

當屏幕寬度小於480像素時，我使用以下CSS代碼進行格式化，並且效果很好。如何在CSS中獲取當前屏幕寬度？

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
}

我想獲得當前的寬度計算中使用zoom喜歡它如下：

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
     zoom: (current screen width)/(480); 
    } 
}

來源

2016-02-14 mongmong seesee

這僅僅是不可能獨自做到這一點在CSS。 –

'zoom'只是IE瀏覽器。現在在CSS中它使用'transform：scale（xx）' – dippas

-2

像在this post其不可能提及。您可以爲不同的媒體類型準備單獨的.css文件，並使用JavaScript處理它。看看這個artcile： How to use Media Queries in JavaScript

來源

2016-02-14 15:38:57

如果你看過這個問題的第一個答案，你就可以知道OP正在嘗試什麼。 –

使用CSS3的Viewpoort百分比功能。

Viewport-Percentage Explanation

假設你想要的身體寬度尺寸是瀏覽器的視口的比率。我添加了一個邊框，以便在更改瀏覽器寬度或高度時可以看到該主體的大小調整。我使用了90％的視口尺寸的比例。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Styles</title> 
 

 
    <style> 
 
     @media screen and (min-width: 480px) { 
 
      body { 
 
       background-color: skyblue; 
 
       width: 90vw; 
 
       height: 90vh; 
 
       border: groove black; 
 
      } 
 

 
      div#main { 
 
       font-size: 3vw; 
 
      } 
 
     } 
 
    </style> 
 

 
</head> 
 
<body> 
 
    <div id="main"> 
 
     Viewport-Percentage Test 
 
    </div> 
 
</body> 
 
</html>

來源

2016-02-14 17:46:56

使用「整頁」可以看到縮放效果。 –

如何在CSS中獲取當前屏幕寬度？

回答

相關問題