整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
開發一個H5頁面的時候，如果這個頁面只適配豎屏/橫屏，這種情況下，通常要做一個手機橫豎屏的提示，實現這個提示功能的方法有多種，這里，我準備寫幾行樣式來實現。
先看如何實現及效果，在總結一下用樣式實現的幾個好處。
代碼：
效果圖：
當橫屏展示的時候：
實現起來特別簡單，就是html和body元素上設置了after/before偽元素，使用media的方式在符合條件的情況下，將其展示出來。詳細見上面代碼所示。
純CSS實現有哪些好處了
1、使用起來比較方便，引用這段CSS代碼，所有頁面就可以實現提示功能。
2、無http請求，不需要引入JS代碼文件，也不會阻塞頁面的渲染，圖片轉成base64，代碼量也不多。
3、視覺可以自定義，提示圖可以靈活更換。
移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
豎屏引用
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}
在做前端響應式網站特別，響應式成為現在前端設計一個熱點，它成為熱點的最主要的原因就是，移動端設備屏幕的種類多樣，那么如何設置響應式屏幕。
/* 打印樣式 */
@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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
