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

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

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

一、這麼實現

代碼：

效果圖：

當橫屏展示的時候：

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

二、有哪些好處

純CSS實現有哪些好處了

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

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

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！