css屬性——env()和constant()設置安全區域


env()和constant(),是IOS11新增特性,Webkit的css函數,用於設定安全區域與邊界的距離,有4個預定義變量:

safe-area-inset-left:安全區域距離左邊邊界的距離
safe-area-inset-right:安全區域距離右邊邊界的距離
safe-area-inset-top:安全區域距離頂部邊界的距離
safe-area-inset-bottom :安全距離底部邊界的距離
而env()和constant()函數有個必要的使用前提,H5網頁設置viewport-fit=cover的時候才生效,小程序里的viewport-fit默認是cover。

未適配底部效果:
img

適配底部代碼:

復制代碼
height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2

height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2

padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2

padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2

// 先constant再env
復制代碼

適配后效果

img


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM