小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
横竖屏适配
利用JS
和CSS
都可以做到,这里我们说下CSS
怎么做
@media screen and (orientation:portrait){
#box{
background: red;
}
}
@media screen and (orientation:landscape){
#box{
background: green;
}
}
- screen 屏幕
- orientation 方向
- portrait 竖向
- landscape 横向
刘海适配 iphoneX 为例
iphoneX
首先提出刘海屏概念的时候,打了所有软件一个措手不及,例如上面的王者荣耀,完全看不见金币有多少,也很难点击到,如果我对面有个iphoneX
的对手,那简直就是福利局。
所以起初,我们如何适配iphoneX
就是个很头疼的问题了。
不过毕竟iphoneX是个主流手机,为了更好的支持它,软件商纷纷拿出自己的方案,一直到现在,其实iphoneX的刘海在我们只做网站的时候,已经不会产生太大的影响了。
所以对于移动端来说,顶部的适配,我们已经不需要去处理啦,但是底部以及左右两侧,我们就要考虑下了
安全区
上面这个图,就是我们的安全区,保证内容是在安全区内进行显示的,会比较好,不容易发生遮挡、显示不全等问题。
利用iphoneX
专属样式viewport-fit
属性,他会对网页设置安全区
<meta name="viewport" content="viewport-fit=cover>
- cover
- contain
配合css方法
body{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
}
- constant:小于IOS11.2版本生效
- env:大于IOS11.2版本生效
可以看到下面出现了一块内容,这次黑色的这条线,就不会挡住我们的文字或其它内容了。
- safe-area-inset-lef 设置左侧安全区
- safe-area-inset-right 设置右侧安全区
- safe-area-inset-top 设置顶部安全区
- safe-area-inset-bottom 设置底部安全区
点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
往期精彩推荐
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
Git 相关推荐
面试相关推荐
更多精彩详见:个人主页