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

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

先看如何實現及效果，在總結一下用樣式實現的幾個好處。

一、這么實現

代碼：

效果圖：

當橫屏展示的時候：

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

二、有哪些好處

純CSS實現有哪些好處了

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

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

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

在做前端響應式網站特別，響應式成為現在前端設計一個熱點，它成為熱點的最主要的原因就是，移動端設備屏幕的種類多樣，那么如何設置響應式屏幕。

/* 打印樣式 */

@media print { color: red; }

/* 手機等小屏幕手持設備 */

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

/* 平板之類的寬度 1024 以下設備 */

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

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

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

/* 豎屏 */

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

/* 橫屏 */

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

手機、平板設備屏幕尺寸眾多，寬度不一，寫手機、平板對應css時最好用百分比寬度來自適應各種大小不一的屏幕寬度。這個百分比尺寸不算太難但也不是個太輕便的活，如果你css不熟練的話最好先別折騰這塊，把基礎練好了來。 還有，用了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代碼如下

//判斷手機橫豎屏狀態：

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

alert("豎屏狀態！") }

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

{ alert("橫屏狀態！") }

}

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

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

從而根據實際需求而執行相應的程序。通過添加監聽事件onorientationchange，進行執行就可以了。

/* media */

/* 橫屏 */

@media screen and (orientation:landscape){

}

/* 豎屏 */

@media screen and (orientation:portrait){

}

/* 窗口寬度<960,設計寬度=768 */

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

/* 窗口寬度<768,設計寬度=640 */

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

/* 窗口寬度<640,設計寬度=480 */

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

/* 窗口寬度<480,設計寬度=320 */

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

/* windows UI 貼靠 */

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

/* 打印 */

@media print{ }

文/丁向明

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

http://dingxiangming.com

屏與橫屏：

很多視口我們要對橫屏和豎屏顯示不同的布局，所以我們需要檢測在不同的場景下給定不同的樣式：

JavaScript檢測橫屏

window.orientation:獲取屏幕旋轉方向

window.addEventListener("resize", ()=>{
 if (window.orientation===180 || window.orientation===0) { 
 // 正常方向或屏幕旋轉180度
 console.log('豎屏');
 };
 if (window.orientation===90 || window.orientation===-90 ){ 
 // 屏幕順時鐘旋轉90度或屏幕逆時針旋轉90度
 console.log('橫屏');
 } 
}); 

CSS檢測橫屏