国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

IPhoneX網(wǎng)頁(yè)布局簡(jiǎn)介

Hwg / 915人閱讀

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

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

設(shè)計(jì)和尺寸相關(guān)
IPone型號(hào) 屏幕尺寸 屏幕密度 開發(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ì)的角度上，根據(jù)開發(fā)尺寸我們用IPoneX和比較經(jīng)典的4.7英寸屏幕進(jìn)行對(duì)比。豎屏模式下不難發(fā)現(xiàn)X比其多了145pt，那么我們應(yīng)該怎么分配這145的距離呢。

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

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

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

安全區(qū)域

][2]][1]

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

viewport-fit

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

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

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

不設(shè)置：

設(shè)置為 cover：

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

CSS constant()函數(shù)

我們可以通過(guò)計(jì)算其padding值來(lái)進(jìn)行布局，解決文字被埋在傳感器底部的問(wèn)題。

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

那我們?cè)囍F(xiàn)在給剛剛的被傳感器覆蓋的頁(yè)面增加一些 css：

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

是的。完美的效果。

瑕疵問(wèn)題

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

新的CSS函數(shù) min() 和 max() 可以幫我們?cè)诓煌ㄟ^(guò)JS的情況下簡(jiǎn)單解決這個(gè)問(wèn)題。（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 會(huì)取較大的那個(gè)值。當(dāng) safe-area-inset-left 為0時(shí)候，其值會(huì)為 12px。

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

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

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

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

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

本文部分圖片和思想來(lái)自designing-websites-for-iphone-x

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113319.html

相關(guān)文章

  • 移動(dòng)端布局與適配

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

    Clect 評(píng)論0 收藏0

  • Are you sure you understand the responsive layout？

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

    Shisui 評(píng)論0 收藏0

  • Are you sure you understand the responsive layout？

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

    longshengwang 評(píng)論0 收藏0

  • iphonex適配

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

    FrancisSoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<