擊上方藍字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！

開發(fā)一個H5頁面的時候，如果這個頁面只適配豎屏/橫屏，這種情況下，通常要做一個手機橫豎屏的提示，實現(xiàn)這個提示功能的方法有多種，這里，我準備寫幾行樣式來實現(xiàn)。

先看如何實現(xiàn)及效果，在總結(jié)一下用樣式實現(xiàn)的幾個好處。

一、這么實現(xiàn)

代碼：

效果圖：

當(dāng)橫屏展示的時候：

實現(xiàn)起來特別簡單，就是html和body元素上設(shè)置了after/before偽元素，使用media的方式在符合條件的情況下，將其展示出來。詳細見上面代碼所示。

二、有哪些好處

純CSS實現(xiàn)有哪些好處了

1、使用起來比較方便，引用這段CSS代碼，所有頁面就可以實現(xiàn)提示功能。

2、無http請求，不需要引入JS代碼文件，也不會阻塞頁面的渲染，圖片轉(zhuǎn)成base64，代碼量也不多。

3、視覺可以自定義，提示圖可以靈活更換。

移動端中我們經(jīng)常碰到橫屏豎屏的問題，那么我們應(yīng)該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。

CSS如何判斷橫屏豎屏

豎屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

橫屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代碼

@media screen and (orientation: portrait) { 
 /*豎屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*橫屏 css*/ 
} 

JS判斷橫屏豎屏方法

在做前端響應(yīng)式網(wǎng)站特別，響應(yīng)式成為現(xiàn)在前端設(shè)計一個熱點，它成為熱點的最主要的原因就是，移動端設(shè)備屏幕的種類多樣，那么如何設(shè)置響應(yīng)式屏幕。

/* 打印樣式 */

@media print { color: red; }

/* 手機等小屏幕手持設(shè)備 */

@media screen and (min-width: 320px) and (max-width: 480px) { body { background: yellow; } }

/* 平板之類的寬度 1024 以下設(shè)備 */

@media only screen and (min-width: 321px) and (max-width: 1024px) { body { background: blue; } }

/* PC客戶端或大屏幕設(shè)備: 1028px 至更大 */

@media only screen and (min-width: 1029px) { body { background: green; } }

/* 豎屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {對應(yīng)樣式}

/* 橫屏 */

@media screen and (orientation:landscape){對應(yīng)樣式}

手機、平板設(shè)備屏幕尺寸眾多，寬度不一，寫手機、平板對應(yīng)css時最好用百分比寬度來自適應(yīng)各種大小不一的屏幕寬度。這個百分比尺寸不算太難但也不是個太輕便的活，如果你css不熟練的話最好先別折騰這塊，把基礎(chǔ)練好了來。 還有，用了css媒體查詢后，ie6-8載入不了樣式表，要引用個：Respond.js來讓ie6-8下正確載入css。js自行百度，到處有下載。 用CSS判斷橫屏豎屏問題。

CSS代碼如下

1、

@media (orientation: portrait) { } 橫屏

@media (orientation: landscape) { }豎屏

2、 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">橫屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">豎屏

用JavaScript判斷橫屏豎屏問題。JavaScript代碼如下

//判斷手機橫豎屏狀態(tài)：

function hengshuping(){ if(window.orientation==180||window.orientation==0){

alert("豎屏狀態(tài)！") }

if(window.orientation==90||window.orientation==-90)

{ alert("橫屏狀態(tài)！") }

}

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機是處在橫屏還是豎屏狀態(tài)。

從而根據(jù)實際需求而執(zhí)行相應(yīng)的程序。通過添加監(jiān)聽事件onorientationchange，進行執(zhí)行就可以了。

/* media */

/* 橫屏 */

@media screen and (orientation:landscape){

}

/* 豎屏 */

@media screen and (orientation:portrait){

}

/* 窗口寬度<960,設(shè)計寬度=768 */

@media screen and (max-width:959px){ }

/* 窗口寬度<768,設(shè)計寬度=640 */

@media screen and (max-width:767px){ }

/* 窗口寬度<640,設(shè)計寬度=480 */

@media screen and (max-width:639px){ }

/* 窗口寬度<480,設(shè)計寬度=320 */

@media screen and (max-width:479px){ }

/* windows UI 貼靠 */

@media screen and (-ms-view-state:snapped){ }

/* 打印 */

@media print{ }

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com