首先隨便新建一個(gè)用來(lái)做判斷的類，然后通過(guò) Media Queries 來(lái)對(duì)這個(gè)類的 z-index 屬性賦予不同的值。這個(gè)類僅作為 JavaScript 讀取使用，所以需要將其移出屏幕窗口，讓瀏覽者不可見(jiàn)以免引起意外情況。

作為演示，下面代碼設(shè)置了四種設(shè)備狀態(tài)：桌面普通版、小屏幕桌面版、平板電腦版和手機(jī)版。

/* default state */
.state-indicator {
 position: absolute;
 top: -999em;
 left: -999em;

 z-index: 1;
}

/* small desktop */
@media all and (max-width: 1200px) {
 .state-indicator {
 z-index: 2;
 }
}

/* tablet */
@media all and (max-width: 1024px) {
 .state-indicator {
 z-index: 3;
 }
}

/* mobile phone */
@media all and (max-width: 768px) {
 .state-indicator {
 z-index: 4;
 }
}

JavaScript 判斷

CSS 已經(jīng)就位了，那么就需要用 JavaScript 來(lái)生成了一個(gè)臨時(shí)的 DOM 對(duì)象，然后為它設(shè)置對(duì)應(yīng)的類，然后再讀取這個(gè)對(duì)象的 z-index 值。原生的寫(xiě)法如下：

這樣，就可以用一下代碼來(lái)判斷設(shè)備狀態(tài)，然后執(zhí)行相應(yīng)的 JavaScript 代碼：

這里如果你使用的是 jQuery，直接使用下面代碼就可以了：

先創(chuàng)建，然后獲取，最后刪掉這個(gè)節(jié)點(diǎn)，具體的設(shè)備會(huì)在你的控制臺(tái)中輸出，點(diǎn)擊這里查看 Demo ，可以試著拖動(dòng)一下中間的邊框，然后點(diǎn)擊 Run。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com