点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

开发一个H5页面的时候，如果这个页面只适配竖屏/横屏，这种情况下，通常要做一个手机横竖屏的提示，实现这个提示功能的方法有多种，这里，我准备写几行样式来实现。

先看如何实现及效果，在总结一下用样式实现的几个好处。

一、这么实现

代码：

效果图：

当横屏展示的时候：

实现起来特别简单，就是html和body元素上设置了after/before伪元素，使用media的方式在符合条件的情况下，将其展示出来。详细见上面代码所示。

二、有哪些好处

纯CSS实现有哪些好处了

1、使用起来比较方便，引用这段CSS代码，所有页面就可以实现提示功能。

2、无http请求，不需要引入JS代码文件，也不会阻塞页面的渲染，图片转成base64，代码量也不多。

3、视觉可以自定义，提示图可以灵活更换。