好好的运行了一年多的H5网页，今天突然QA同学拿着个iphoneX过来，说得适配一波。
一看是iphoneX的齐刘海挡住了UI顶部的一个经验条。那就改一波吧。公司项目不方便放图。
想了好久，不想大改UI，只想将被齐刘海遮住的经验条下移。想到了使用css伪元素。伪元素作为一个装饰在html头部插入一个空白间距。方法如下：
新建一个css文件：iphoneX.css
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /*增加头部适配层*/
.html-topbar { height: 100%;
box-sizing: border-box;
padding-top: 44px;
&:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 44px;
background-color: #000000;
z-index: 9998;
}
}
}注释&:before是一种简写方式，等价为.html-topbar:before,另外伪元素的content不可省略(哪怕内容为空)，否则伪元素不执行。
在原html中加入css,并未html标签设置类名<html class="html-topbar"><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" type="text/css" href="iphoneX.css">
加入后有效，以后针对特定手机屏幕适配也可以使用@media only screen and (device-width: 375px) and (device-height: 812px)这种方式。
扩展阅读：大放异彩的伪元素
作者：坚坚老师
链接：https://www.jianshu.com/p/da58d9b48989
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦