卡卡網(wǎng)

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

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

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

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

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

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

4、如果使用max-device-width，那么當(dāng)手機(jī)由豎變橫時(shí)，CSS是不執(zhí)行的，因?yàn)?ldquo;手機(jī)寬度”并沒(méi)有變化。如果使用max-width，那么當(dāng)手機(jī)由豎變橫時(shí)，CSS是執(zhí)行的，因?yàn)?ldquo;顯示區(qū)域”發(fā)生了變化。

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

通過(guò)這樣解釋?zhuān)銘?yīng)該對(duì)max-device-width和max-width的區(qū)別和使用有所了解了吧。

看看下面的寫(xiě)法

/* #### 移動(dòng)設(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ū)別是一樣的。

實(shí)例分析

下面是兩段css代碼

代碼1：

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

代碼2：

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

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

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

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

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

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

標(biāo)簽: max-device-width  max-width