卡卡網(wǎng)

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

max-device-width和max-width的區(qū)別

max-device-width和max-width是有區(qū)別的，表現(xiàn)在如下幾個方面：

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

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

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

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

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

通過這樣解釋，你應(yīng)該對max-device-width和max-width的區(qū)別和使用有所了解了吧。

看看下面的寫法

/* #### 移動設(shè)備 #### */
@media screen and (max-device-width: 480px){
/* CSS 代碼 */
}
/* #### PC #### */
@media screen and (max-width: 1024px){
/* CSS 代碼 */
}

min-device-width和min-width的區(qū)別，跟max-device-width和max-width的區(qū)別是一樣的。

實例分析

下面是兩段css代碼

代碼1：

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

代碼2：

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

現(xiàn)在在PC機上打開網(wǎng)頁，用Firefox瀏覽器，把瀏覽器縮小到寬度為385px。

使用max-device-width的結(jié)果

使用max-device-width時，網(wǎng)頁不會隨瀏覽器縮小而自適應(yīng)變化。

使用max-width的結(jié)果

使用max-width后，網(wǎng)頁隨瀏覽器縮小而發(fā)生自適應(yīng)變化。

標簽: max-device-width  max-width