iphone刘海屏页面适配方法

1.下面是实现iphonex刘海屏前端页面适配的一个插值算法小案例

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style body，ul { margin : 0；} ul { padding-left : 10px；}李{列表式：无；} .电话{位置：相对；宽度： 600像素；高度： 300pxborder: 10px固体# 000;边界半径： 30px余量： 100像素自动0;} .内容，内容ul {宽度： 100%；高度： 100%;} .内容{溢出-x:隐藏；溢出-y:滚动；} .摄像机{位置：绝对；top : 60pxleft : 0；宽度： 26px高度： 180像素；背景-颜色：黑色；边界半径： 0 30px 30px 0}李莉{边框-顶部： 1px实心# CCC}李{ font-size : 16pxpadd : 5px } * :-web套件-滚动条{ padd-left : 100 px；}/style/headdy div=' phone ' div=' content ' ul liSweeTango/Li Li Li liPacific Rose/Li liSnapDragon/Li lien vy/Li liKoru(Plumac)/Li Li lipik Lady(Scripps Pink)/Li Li Li/Li Li Liquery selectorall(' Li ')；var OCA mera=文档。queryselector(' .摄像机');var Ocontent=文档。查询选择器(' .content')var camPs=OCA mera。getboundingclientrect()；~ ~ function(){ Ocontent。onscroll=参数。来电者；for(AlI的var项目){ var项目rect=item。getboundingclientrect()；var dtf=项目矩形。底层阵营。top var dtb=项目rect。底层阵营。底部if(数学。ABS(dtf)20){项目。风格。transform=' translateX(' lerp(0，30，cal(dtf，20))' px)'；} else if(dtf 20 dtb-20){ item。风格。transform=' translateX(' 30 ' px ')；} else if(数学。ABS(dtb)20){项目。风格。transform=' translateX(' lerp(30，0，cal(dtb，20))' px)'；} else { //全部移除摄像头区域项目。风格。transform=' translateX '(0 ' px ')；} } }() }() /** * @param插值算法* @param p1初始化状态* @param p2结束状态* @param t时间函数(0-100%) * * 返回第一亲代到p2之间的值*/function lerp(p1，p2，t){ return(p2-P1)* t P1 } function cal(dis，thr){ return(dis thr)/(thr * 2)}/script/body/html以上所述是小编给大家介绍的苹果手机刘海屏页面适配方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！