不同的屏幕分辨率的CSS？

Question

如果我檢查在不同的系統上使用不同分辨率的html，那麼視圖會失真。

在運行時有沒有計算屏幕寬度和高度的方法？

我沒有用CSS經驗，但做了一些研究，發現約：

https://css-tricks.com/css-media-queries/

但他們所提出的建議不同的類（如果我沒看錯）

我的問題是有可能。在運行時獲取高度和寬度，並只使用一個css？

類似：

.view { 
min-width :"some how gets computed:which device we are using ?" 
min-height :"some how gets computed:which device we are using ?" 
} 

Answer 1

媒體查詢是您的問題的不錯選擇。

您不必爲這些使用不同的類，只需要根據分辨率定義不同的行爲即可。

你可以通過Javascript知道屏幕高度和寬度，但用CSS，我不認爲這是可能的。用CSS可以做的最好的事情就是定義設備的範圍，如移動設備，平板電腦，筆記本電腦，真正大屏幕設備以及基於媒體查詢，您可以定義某個類在特定類型的設備上所做的工作。

有下面的例子來看看一個：

/* For Mobile */ 
@media screen and (max-width: 540px) { 
    .view { 
     width: 400px; 
    } 
} 

/* For Tablets */ 
@media screen and (min-width: 540px) and (max-width: 780px) { 
    .view { 
     width: 600px; 
    } 
} 

實際尺寸可以根據您的情況有所不同。

這是許多框架用於實現響應的相同方法。

Answer 2

可以在單一媒體查詢組合不同的屬性。此示例將在寬度至少爲500px且高度至少爲400px的所有屏幕上應用這些樣式：

@media all and (max-width: 500px) and (min-height: 400px) { 
    body { 
    background: #ccc; 
    } 
    .someclass { 
    padding: 10px; 
    } 
} 

Answer 3

不是。他們並不是建議不同的班級。 通過媒體查詢，您可以根據屏幕（或媒體）分辨率（寬度，高度，縱橫比...）在單個文件中設置不同的css規則，也可以根據查詢包含不同的樣式表。

我建議你按照教程開始使用媒體查詢。