css iphonex适配,H5页面适配
IPhoneX取消了实体按键，改成了底部的小黑条。这一改变导致了网页上令人尴尬的屏幕适配问题。对于网页，浏览器已经处理了顶部(刘海)的适配，所以我们只需要关注底部和小黑条(即相对于底部固定的吸底导航、返回顶部等常见元素)的适配。
通过查阅一些官方文件，结合实际项目中的一些处理经验，笔者整理了一套简单的适应方案与大家分享，希望对你有所帮助。以下是治疗前后的效果图：
众所周知，iphoneX在屏幕上方有一个整齐的刘海。iPhoneX取消了实体按键，改为底部的黑色小条。如果你不去适应它，这些地方就会被屏蔽。所以本文讲述了如何将齐整的刘海与底部的小黑条相适应。
几个新概念
安全区
安全区域是指一个可见的窗口范围，安全区域内的内容不受角落、传感器外壳和Home指示器的影响，如下图所示：
viewport-fit
IOS11是一项新功能。为了适应iPhoneX对现有viewport meta标签的扩展，并在可视窗口中设置网页的布局，Apple可以设置三个值:
该值描述了auto的默认值，这与contain的性能一致。内容显示在安全区域。Viewprot-fit:auto相当于viewport-fit:contain包含可视窗口完全包含web内容(左图)。内容显示在安全区域。Viewport-fit:所包含的封面网页的内容完全覆盖可见窗口(右图)。内容充满了屏幕。视口适合：覆盖
constant 函数
Webkit的一个CSS功能iOS11的新特性，用来设置安全区域与边界的距离。有四个预定义变量(在px中):
safe-area-inset-left:safe-area-inset-right:safe-area-inset-top:safe-area-inset-bottom:safe-area-inset-bottom:注意：默认情况下，网页不添加扩展Viewport-fit=contain。如果需要适配iPhoneX，必须设置viewport-fit=cover，否则常量功能不起作用，这是适配的必要条件。
官方文档中提到将来会用env()代替constant()，但目前还没有。这两个函数是webkit中的css函数，可以直接使用变量函数。Constant仅在webkit kernel: env for iOS 11.2或更低版本下受支持：iOS=11.2系统注意：不带扩展的网页的默认性能为viewport-fit=contain。如果需要适配iPhone，必须设置viewport-fit=cover，这是适配的关键步骤。
适配例子
第一步：在可视窗口中设置网页的布局。
meta name= viewport content= width=device-width，viewport-fit=cover /第二步：将页面的主要内容限制在一个安全的区域内。
Body {/* Fit bangs */padding-top:常量(safe-area-inset-top)；/*适应底部黑条*/padding-bottom:常量(safe-area-inset-bottom)；}步骤3:固定元素的调整
底部不为0。
/*底部不为0的情况*/。固定{bottom: calc(50px(原始底部值)常量(safe-area-inset-bottom))；}底部吸力(底部=0)
/* 方法1 :设置内边距扩展高度*//* 这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。*/.fix { padding-bottom:constant(safe-area-inset-bottom)；}/* 直接扩展高度*/.修复{高度：计算(60px(原来的高度值)常量（安全区域-插入-底部));}/* 方法2 :在元素下面用一个空差异填充，但是背景色要一致*/.空白{位置：固定；底部：0;高度：0;宽度：100%;高度：常数（安全区域-插入-底部);背景色：# fff}/*吸底元素样式*/.fix { margin-bottom:constant(safe-area-inset-bottom)；}最后：使用@支持
因为只有有齐刘海和底部黑条的机型才需要适配样式，可以用@支持配合使用：
@ supports(bottom:constant(safe-area-inset-bottom)){ body { padding-bottom:constant(safe-area-inset-bottom)；}}完整检测代码
@supports隔离兼容模式
因为只有有齐刘海和底部黑条的机型才需要适配样式，可以用@支持配合使用：
@ mixin iphonex-CSS { padding-top:constant(safe-area-inset-top)；//为导航栏状态栏的高度88px padding-top:env(safe-area-inset-top)；//为导航栏状态栏的高度88px左填充：常量（安全区域-左插入);//如果未竖屏时为0 padding-left:env(safe-area-inset-left)；//如果未竖屏时为0填充-右侧：常量(安全区域-右侧插图)；//如果未竖屏时为0填充-右：env(安全区域-插入-右);//如果未竖屏时为0填充-底部：常量(安全区域-插入-底部)；//为底下圆弧的高度34px padding-bottom:env(safe-area-inset-bottom)；//为底下圆弧的高度34px } @ mixin iphonex-support { @ supports(bottom:constant(safe-area-inset-top))或(bottom:env(safe-area-inset-top)){ body。iphonex { @ include iphonex-CSS；} }}@media 媒体查询
@ mixin iphonex-CSS { padding-top:constant(safe-area-inset-top)；//为导航栏状态栏的高度88px padding-top:env(safe-area-inset-top)；//为导航栏状态栏的高度88px左填充：常量（安全区域-左插入);//如果未竖屏时为0 padding-left:env(safe-area-inset-left)；//如果未竖屏时为0填充-右侧：常量(安全区域-右侧插图)；//如果未竖屏时为0填充-右：env(安全区域-插入-右);//如果未竖屏时为0填充-底部：常量(安全区域-插入-底部)；//为底下圆弧的高度34px padding-bottom:env(safe-area-inset-bottom)；//为底下圆弧的高度34px}/* iphonex适配*/@ mixin iphonex-media { @ media only screen and(设备宽度：375 px)and(设备高度：812 px)and(-WebKit-device-pixel-ratio:3){ body。iphonex { @ include iphonex-CSS；} }}补充
注意项
包封/包围（动词包围的简写)和常数只有在视口适合=覆盖时候才能生效，上面使用的旅行队的控制台可以检测模拟器中网页开启网检查器。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。