龙空技术网

纯CSS写一个H5横竖屏提示功能

小郑搞码事 946

前言:

现在咱们对“html列表横”大致比较关注,朋友们都需要知道一些“html列表横”的相关文章。那么小编同时在网络上搜集了一些有关“html列表横””的相关知识,希望大家能喜欢,姐妹们快快来了解一下吧!

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

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

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

一、这么实现

代码:

效果图:

当横屏展示的时候:

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

二、有哪些好处

纯CSS实现有哪些好处了

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

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

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

标签: #html列表横 #html让网页在手机端自动横屏 #h5横屏设置