我不知道有多少Ki-Friends買了iPhone-x。對我來說，如果你真的花了將近10000元買了一部手機，我覺得沒有必要。此外，對於我們班來說，購買這種手機的功能是接近1萬元。嗯，只是爲了炫耀嗎？沒必要。在iPhone的配置中，有很多東西我們不能使用。無論從價格還是成本來看，我認爲你確實需要使用iPhone。購買7是最划算的。如上所述，它只代表個人觀點。
從上面的圖片中可以看出，這款手機仍然很漂亮，但是你知道如何將iPhone-x與前端網頁相適應嗎？讓我們分享今天。
PhoneX取消了物理按鈕，改爲底部的一個小黑條。這一變化導致了網頁上的屏幕調整問題。對於網頁，頂部的自適應問題瀏覽器（劉海部分）已經被處理，所以我們只需要關注底部和小黑條的自適應問題（即常見的吸底導航、返回頂部和其他相對底部固定的定位元素）。
作者通過查閱一些官方文件，結合一些實際項目的處理經驗，整理出一套簡單的適應方案，與大家分享，希望對大家有所幫助。以下是處理前後的結果：
在適應之前需要了解的幾個新知識
安全區域
安全區是指不受角落、傳感器外殼和家庭指示器影響的可視窗口區域。藍色區域如下所示。
也就是說，如果我們想要很好地適應，我們必須確保頁面的視覺和操作區域在安全區域內。
參考文件：人機界面指南-iPhoneX（https://developer.apple.com/ios/.-interface-./overview/iphone-x/）
Viewport擬合
利用iOS 11的新特性，爲了適應iPhone X上現有視口元標記的擴展，蘋果可以設置三個值以在可視窗口中設置網頁的佈局：
Contain：可視窗口包含頁面的所有內容（左）
封面：頁面內容完全覆蓋了可視窗口（右）
Auto：默認值，與
小編建議加入這個羣體：九六零+五零八+九二零羣體中有數百人！你遇到的每個問題都會被交換！並且免費共享零基本介紹信息網頁前端開發html，CSS介紹基本信息集！這是一個學習和交流的好地方！還有一些程序員急於回答各種各樣的問題！很快就滿了。如果你想繼續，那就繼續！各種各樣的PDF等待您下載！都是免費的！所以小編在組裏等着你們一起來交流學習。
注意：不添加擴展名的頁面的默認性能是viewport-.=.。爲了適應iPhone X，您必須設置viewport-.=.，這是適應的關鍵步驟。
有關詳細信息，請參閱文檔：viewport-.-descriptor
常量函數
iOS 11的新特性是Webkit的CSS功能，用於設置安全區域和邊界之間的距離。有四個預定義的變量：
安全區域插入左邊：安全區域與左邊界之間的距離
安全區域插入右邊：安全區域與右邊界之間的距離
安全區域插入頂部：安全區域與頂部邊界之間的距離
安全區域插入底部：安全區域與底部邊界之間的距離
這裏我們只需要關注安全區域插入底部變量，因爲它對應於小黑條的高度（水平和垂直屏幕值不同）。
注意：當viewport-.=contain時，常量函數不起作用，必須與viewport-.=cover一起使用。對於不支持常數的瀏覽器，瀏覽器將忽略它。
官方文件提到env函數將取代常量函數。作者已經測試過，它暫時不可用。
有關詳細信息，請參閱文檔：爲iPhone X設計網站
如何配合
瞭解以上幾點知識，那麼我們適應這個思路就很清楚了。
步驟1：在可視窗口中設置網頁的佈局
添加viweport-fit屬性使得頁面的內容完全覆蓋整個窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
如前所述，只有設置了viewport-.=.，才能使用常數函數。
步驟2：將頁面的主要內容限制爲安全區域
根據實際頁面場景選擇此步驟。如果未設置此值，則小黑條可能遮擋頁面的底部內容。
body { padding-bottom: constant(safe-area-inset-bottom);}
步驟3：調整固定元素
類型1：固定完全底部吸收元件（.=0），例如以下兩種情況：
可以通過添加內邊緣填充物來擴展高度：
{ padding-bottom: constant(safe-area-inset-bottom);}
或者通過計算覆蓋原始高度的函數Calc：
{ height: calc(60px(假設值) + constant(safe-area-inset-bottom));}
注意，此方案要求底部條帶爲背景色，因爲背景的擴展部分跟隨外部容器，否則會出現中空。
另一種選擇是添加新元素（空色塊，主要用於小黑條高度佔用），然後吸下元素不能改變高度只需要調整位置，如下所示：
{ margin-bottom: constant(safe-area-inset-bottom);}
空色塊：
{ position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); background-color: #fff;}
類型2：固定底部0元素，如“回到頂部”和“側邊廣告”等。
像這樣，位置需要向上調整，只能靠邊際來處理。
{ margin-bottom: constant(safe-area-inset-bottom);}
或者，可以通過計算函數calc來覆蓋原始底部值：
{ bottom: calc(50px(假設值) + constant(safe-area-inset-bottom));}
別忘了使用@.
到目前爲止，我們已經瞭解了兩種常見的固定元素適配方案，但是別忘了，一般來說，我們只想向iPhone X添加新的適配樣式，可以使用@support樣式編寫它：Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation固定元素
@supports (bottom: constant(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); }}
寫在最後
以上方案僅供參考。作者認爲，這一階段的改編雖然有些曲折，但至少是可以解決的。具體而言，根據頁面的實際場景，我們需要在不影響用戶體驗和操作的前提下不斷嘗試和探索，以實現更完美的適應。
以上就是今天的分享。如果你對此一無所知，你可以在後臺給我留言。稍後，我會在今天的頭條新聞裏做一個適合iPhone-x的視頻錄製和分享，從頭開始分享結尾，解釋細節，這樣你就可以更完整地理解它。對於許多前端零基礎的學生來說，今天分享的內容可能很難消化，但是還沒有。關係，就這麼辦。稍後，我將一個接一個地更新基金會。謝謝你的關注。