<cite id="ekooy"></cite>

<strike id="ekooy"></strike>

IPhoneX網頁布局簡介

Hwg 發布于2019-08-29 15:26 / 906人閱讀

摘要：在使用定位的時候如果和理想效果有偏差可以試試設置的高度為全屏時代即將來臨，未來我們應該有更多的方法進行網頁布局。

IPhoneX全面屏是十分科技化的，但是由于其圓角和攝像頭劉海位置以及操控黑條的存在使得我們需要去對其樣式做一些適配，沒有X的同學可以開啟 Xcode 9 的iPhone X 模擬器作為學習和調試。

設計和尺寸相關

IPone型號	屏幕尺寸	屏幕密度	開發尺寸	像素密度	倍圖
4系列	3.5英寸	326ppi	320*480pt	640*960px	@2X
5系列	4英寸	326ppi	320*568pt	640*1136px	@2X
6/6s/7/8	4.7英寸	326ppi	375*667pt	750*1334px	@2X
6p/6sp/7p/8p	5.5英寸	401ppi	414*736pt	1242*2208px	@3X
X	5.8英寸	458ppi	375*812pt	1125*2436px	@3X

在設計的角度上，根據開發尺寸我們用IPoneX和比較經典的4.7英寸屏幕進行對比。豎屏模式下不難發現X比其多了145pt，那么我們應該怎么分配這145的距離呢。

頂部 Navigation Bar增加44（for“劉海”）

底部 Bottom Bar增加34（for“黑條Home按鈕”）

中間的 Safe Area 區域（for“內容區域”）

安全區域

][2]][1]

何為安全區域，簡單來講就是我們在此區域內設置一些交互的按鈕或者鏈接不會被影響。下圖的話底部按鈕就會受到一些影響，圖片隨意截取，請勿在意：

viewport-fit

可喜可賀，IOS11給我們提供了一個新特性 viewport-fit

值	說明
auto/contain	頁面默認內嵌
cover	頁面充滿屏幕

viewport-fit默認情況下是 auto 我們可以看一下同一個頁面不設置 viewport-fit 和設置其為 cover 的兩種表現形式：

不設置：

設置為 cover：

當然，在橫屏情況下我們可以更清晰地看到，設置cover可以使我們的頁面導航和tag更加符合設計，但是內部的我們應該怎樣進行布局呢？是直接使用 padding 還是有別的方法呢？

CSS constant()函數

我們可以通過計算其padding值來進行布局，解決文字被埋在傳感器底部的問題。

但是IOS11給我們提供了更簡單的辦法。WebKit 中新增了一個 CSS 函數 constant()，以及一組四個已經定義好的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom。這四個常量分別代表了每個方向的非安全區域的值：

那我們試著現在給剛剛的被傳感器覆蓋的頁面增加一些 css：

.con {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

是的。完美的效果。

瑕疵問題

但是如果現在我們現在把手機換成豎屏的話，會出現一些小瑕疵，因為我們設置的是 padding-left 和 padding-right 為安全區域外的變局的常量，所以當我們豎過來后，豎屏模式的 safe-area-inset-left 和 safe-area-inset-right 為0，那么文字還是會貼邊的。

新的CSS函數 min() 和 max() 可以幫我們在不通過JS的情況下簡單解決這個問題。（PS：現Safari暫未支持）

@supports(padding: max(0px)) {
    .con {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

這樣的話 padding-left 會取較大的那個值。當 safe-area-inset-left 為0時候，其值會為 12px。

本文講的一些方法對于現階段的IPhone網頁布局其實還是有一些兼容問題

constant() 需要我們對不支持的瀏覽器做一些兼容回退，并且CSS工作組對這個方法使用了不同的名稱

max() 和 min() 方法現階段還沒有支持，我們還是要采用判斷橫豎屏的方法進行動態的設置，或者直接也拋棄 constant() 做固定的padding值。

在使用定位的時候如果和理想效果有偏差可以試試設置 body,html 的高度為 100%

全屏時代即將來臨，未來我們應該有更多的方法進行網頁布局。

本文部分圖片和思想來自designing-websites-for-iphone-x

云服務器 GPU云服務器網頁html標簽簡介布局網頁網頁布局設計 div網頁布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113319.html

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
Are you sure you understand the responsive layout？

摘要：我們推薦使用作為字體單位默認情況下我們標簽的為，我們可以利用媒體查詢，設置在不同設備下的字體大小百分比布局用過的同學都知道，它里面有個柵格系統，說白了就是利用百分比來定義我們元素寬高，而不直接使用。曾幾何時我認為使用了媒體查詢就是響應式布局，這種理解實在是太淺薄了，今天就讓我們重新來認識下什么是響應式布局查看demo 查看源碼，歡迎star 什么是響應式布局前幾年風靡一時Boot...

Shisui 2019-08-29 16:22 評論0 收藏0
Are you sure you understand the responsive layout？

摘要：我們推薦使用作為字體單位默認情況下我們標簽的為，我們可以利用媒體查詢，設置在不同設備下的字體大小百分比布局用過的同學都知道，它里面有個柵格系統，說白了就是利用百分比來定義我們元素寬高，而不直接使用。曾幾何時我認為使用了媒體查詢就是響應式布局，這種理解實在是太淺薄了，今天就讓我們重新來認識下什么是響應式布局查看demo 查看源碼，歡迎star 什么是響應式布局前幾年風靡一時Boot...

longshengwang 2019-08-02 11:11 評論0 收藏0
iphonex適配

摘要：第三步元素的適配類型一完全吸底元素類型二非完全吸底元素，比如返回頂部側邊廣告等第四步如果我們只希望才需要新增適配樣式，我們可以配合來隔離兼容樣式第一步：設置網頁在可視窗口的布局方式ios11新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口：第二步：頁面主體內容限定在安全區域內env() 和 constant()ios11新增特性 ● safe-area-inse...

FrancisSoung 2019-08-26 11:46 評論0 收藏0