iphoneX适配

iphoneX变化：顶部刘海，底部横条，页面圆角

 

1、配置meta

?

1	<meta name="viewport" content="viewport-fit=cover">

　　

2、预留安全距离

constant和env顺序不能变，且必须同时存在

?

1 2 3 4 5 6 7

//为导航栏+状态栏的高度 88px padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);    //为底下圆弧的高度 34px padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);