成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

IPhoneX網(wǎng)頁布局簡介

Hwg / 917人閱讀

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

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

設(shè)計和尺寸相關(guān)
IPone型號 屏幕尺寸 屏幕密度 開發(fā)尺寸 像素密度 倍圖
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

在設(shè)計的角度上，根據(jù)開發(fā)尺寸我們用IPoneX和比較經(jīng)典的4.7英寸屏幕進行對比。豎屏模式下不難發(fā)現(xiàn)X比其多了145pt，那么我們應(yīng)該怎么分配這145的距離呢。

頂部 Navigation Bar增加44（for“劉?！保?/p>

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

中間的 Safe Area 區(qū)域（for“內(nèi)容區(qū)域”）

安全區(qū)域

][2]][1]

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

viewport-fit

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

值 說明
auto/contain 頁面默認(rèn)內(nèi)嵌
cover 頁面充滿屏幕

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

不設(shè)置：

設(shè)置為 cover：

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

CSS constant()函數(shù)

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

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

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

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

是的。完美的效果。

瑕疵問題

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

新的CSS函數(shù) min() 和 max() 可以幫我們在不通過JS的情況下簡單解決這個問題。（PS：現(xiàn)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 會取較大的那個值。當(dāng) safe-area-inset-left 為0時候，其值會為 12px。

本文講的一些方法對于現(xiàn)階段的IPhone網(wǎng)頁布局其實還是有一些兼容問題

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

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

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

全屏?xí)r代即將來臨，未來我們應(yīng)該有更多的方法進行網(wǎng)頁布局。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113319.html

相關(guān)文章

  • 移動端布局與適配

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

    Clect 評論0 收藏0

  • Are you sure you understand the responsive layout？

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

    Shisui 評論0 收藏0

  • Are you sure you understand the responsive layout？

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

    longshengwang 評論0 收藏0

  • iphonex適配

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

    FrancisSoung 評論0 收藏0

發(fā)表評論

0條評論

Hwg

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<