(轉載請刪除括號裡的內容)

在網頁自適應設計中，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-width後，網頁隨瀏覽器縮小而發生自適應變化。

---------------------
作者：穩定翻牆軟體：VPN
來源：CNBLOGS
原文：https://www.cnblogs.com/wenzheshen/articles/5919285.html
版權宣告：本文為作者原創文章，轉載請附上博文連結！
內容解析By：