max(min)-device-width和max(min)-width的區別 - xiaoxiao2014－IT工程師數位筆記本

文章出處

在網頁自適應設計中，max-device-width和max-width是不可缺少的兩大CSS屬性，但是可能大家在使用的選擇上沒有太多講究，認為用其中一個即可。確實，如果沒有特定要求，用任何一個都沒有什么問題，不過如果你對此兩個屬性有了充分的認識之后，你或許把網頁的自適應設計得更為極致一些。

max-device-width和max-width的區別

max-device-width和max-width是有區別的，表現在如下幾個方面：

1、max-device-width是設備整個顯示區域的寬度，例如，真實的設備屏幕寬度。

2、max-width是目標顯示區域的寬度，例如，瀏覽器寬度。

3、如果使用max-device-width，那么在PC瀏覽器上瀏覽網頁時，縮小或放大瀏覽器時是不執行CSS的，因為“PC設備”沒有變化。但如果使用max-width，縮小或放大瀏覽器時是執行CSS的，因為“顯示區域”即瀏覽器大小發生了變化。

4、如果使用max-device-width，那么當手機由豎變橫時，CSS是不執行的，因為“手機寬度”并沒有變化。如果使用max-width，那么當手機由豎變橫時，CSS是執行的，因為“顯示區域”發生了變化。

5、通常，面向“移動設備”用戶使用max-device-width；面向“PC設備”用戶使用max-width。

通過這樣解釋，你應該對max-device-width和max-width的區別和使用有所了解了吧。

看看下面的寫法
```
/* #### 移動設備 #### */
@media screen and (max-device-width: 480px){
/* CSS 代碼 */
}
/* #### PC #### */
@media screen and (max-width: 1024px){
/* CSS 代碼 */
}
```
min-device-width和min-width的區別，跟max-device-width和max-width的區別是一樣的。

實例分析

下面是兩段css代碼

代碼1：
```
@media(max-device-width:960px)
{
    /* CSS 代碼 */
｝

代碼2：

@media(max-width:960px)
{
    /* CSS 代碼 */
｝
```
現在在PC機上打開網頁，用Firefox瀏覽器，把瀏覽器縮小到寬度為385px。

使用max-device-width的結果

使用max-device-width時，網頁不會隨瀏覽器縮小而自適應變化。

使用max-width的結果

使用max-width后，網頁隨瀏覽器縮小而發生自適應變化。