整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          純CSS寫一個H5橫豎屏提示功能

          純CSS寫一個H5橫豎屏提示功能

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

          開發一個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檢測橫屏


          主站蜘蛛池模板: 久久成人国产精品一区二区| 在线观看国产一区二区三区| 亚洲A∨精品一区二区三区下载| 精品日韩亚洲AV无码一区二区三区| 亚洲国产福利精品一区二区| 国产精品一区二区综合| 国产av福利一区二区三巨| 欧美激情一区二区三区成人| 亚洲电影唐人社一区二区| 精品国产一区二区三区2021| 女人18毛片a级毛片一区二区| 亚洲第一区香蕉_国产a| 亚洲国产成人久久综合一区77| 精品国产一区二区三区AV| 国产成人亚洲综合一区| 一区二区三区无码被窝影院| 精品国产鲁一鲁一区二区| 88国产精品视频一区二区三区| 国产一区二区三区不卡AV| 久久se精品一区二区| 少妇激情AV一区二区三区| 亚洲综合色自拍一区| 国产精品无码一区二区三区电影| 精品无码人妻一区二区三区不卡| 精品成人av一区二区三区| 国产亚洲情侣一区二区无| 无码精品久久一区二区三区| 日韩一区二区三区视频| 国产AV国片精品一区二区| 精品国产一区二区三区久久| 无码人妻精品一区二区三区东京热 | 国产成人无码一区二区在线播放| 国产乱码一区二区三区| 亚洲一区精品视频在线| 无码国产精品一区二区免费 | 午夜一区二区在线观看| 精品一区二区三区视频| 精品亚洲一区二区三区在线播放| 丰满少妇内射一区| 欧洲无码一区二区三区在线观看 | 视频精品一区二区三区|