你應該知道的摺疊屏收集適配

做者:龍朝忠css

隨着三星Galaxy Fold和華爲Mate X的發佈,前端同窗將面臨一個新的任務:摺疊屏的適。摺疊屏雖距離普及可能還有很長一段路,大多數公司還未將摺疊屏列入適配的範圍,可是提早研究下摺疊屏的適配仍是極好的。前端

摺疊屏手機概況

華爲Mate X

華爲mate x

技術參數:(因爲手機還未正式上市,這裏數據可能有出入web

三星Galaxy Fold

s

技術參數瀏覽器

柔派-FlexPai

小廠手機,沒啥知名都,資料較少markdown

微軟 Surfaceduo

最近新出,實際是雙屏手機,暫無詳細資料iphone

從目前推出的這幾款摺疊手機能夠看出:摺疊手機從摺疊到展開,屏幕的變化相似於iphone到ipad。oop

摺疊屏適配的本質

當老闆下令說:「咱們的產品要適配摺疊屏」,不一樣的人會有不一樣的反應:佈局

產品和設計
  • 如何更好的利用空間?
  • 如何展現纔不會使頁面顯得空洞?
  • 展開和摺疊時分別怎麼展現?
  • 展開後如何過渡?
  • ……
開發同窗
  • 頁面是否顯示正常?
  • 是否按產品和設計的預期顯示?
  • ……

所以對於咱們開發同窗來講,對摺疊屏的適配首先要肯定一個預期,即要先肯定好交互和設計,才能評估工做。所以「摺疊屏的適配先是一個設計問題,而後纔是一個適配問題」。測試

目前狀況下,產品和設計可能還不會考慮適配摺疊屏的問題,那是否表示開發同窗暫時無事可作呢?不盡然。字體

從以上摺疊屏手機的狀況來看,摺疊屏手機的適配其實就是一個響應式設計的問題,而響應式設計有一個比較公認9條的基本原則,摺疊屏手機的適配至少要知足這9項基本原則。

響應式設計9項基本原則

1.響應式設計 vs 適應式設計

響應式:響應式是流佈局,它會自動適應屏幕大小,不論是什麼設備。尺寸按比例設置,自動隨瀏覽器尺寸變化而變化;簡單隻有一套代碼;

適應式:自適應則採起多個不一樣的佈局設計,多個屏幕的尺寸,使用哪一個佈局取決於屏幕類型。自適應做品用屏幕尺寸來決定用哪套佈局。複雜,要根據市面上設備區分;

這兩種設計方式彼此相輔相成,因此說也沒有對錯之分。具體狀況要依內容而定。

2.內容流

隨着屏幕尺寸愈來愈小,內容所佔的垂直空間也愈來愈多,也就是說,內容會向下方延伸,這就叫作內容流。

這點對前端指導意義是:對於內容不固定狀況,高度不要固定寫死,寫死高度就要考慮溢出狀況,文本溢出、圖片按比例縮放。

3.相對單位

爲了適應不一樣屏幕尺寸和不一樣使用場景,使用絕對單位容易出現問題 。常見的相對單位有em、rem、ch、ex、vw、vh、vmax、vmin。

4.斷點

斷點能夠看作是臨界點,好比屏幕寬度小於這個寬度時顯示一個樣式,大於這個寬度時顯示另外一樣式。常見的斷點落地方案就是媒體查詢,如:

@media (min-width:800px) and (max-width:1800px)
複製代碼

5.最大和最小值

有時候內容佔滿整個屏幕寬度(例如在移動設備上)是好事,但若是相同的內容在電視屏幕上也撐得滿滿的,就不太合理了。由於強行鋪滿,根據前面的內容流原則,可能會致使頁面顯示異常的大。這就是爲何要有最大/最小值。例如,若是寬度爲100%,最大寬度1000px,那麼內容就會以不超過1000px的寬度填充屏幕。

注意:Max-width和min-widht要設置合理,不能太大也不能過小。

如京東首頁和優酷首頁就遵循了這個原則:

6.嵌套對象

這是一種化零爲整的思想,當多個元素位置是相對的時候,對每一個元素採起響應式佈局處理或許比較麻煩,這時候能夠將這些元素用一個元素包裹起來,這樣實現會更加明瞭和整潔。

7.移動優先仍是臺式桌面優先

這表示適配的起點,是先按手機作而後適配臺式機?仍是先按臺式機作而後適配手機?

使用哪一種根據實際狀況決定,無所謂好壞,對於摺疊屏適配來講確定是手機優先。

8.web字體vs系統字體

想讓本身的網站擁有炫酷的Futura或Didot效果嗎?那就是用web字體吧。儘管web字體看起來很炫酷,但你要記住,這些字體都須要用戶下載,字越多,用戶加載頁面的時間也就越長。另外一方面,系統字體加載速度則快得多(前提是用戶本機就有),但太過普通。

9.位圖vs矢量圖

你的圖標是否有不少細節,而且應用了不少華麗的效果?若是是,那就用位圖。若是不是,考慮使用矢量圖。若是是位圖,使用jpg、png或gif。矢量圖則最好使用SVG或圖標字體。其各有利弊。但你要時刻牢記圖標尺寸——未通過優化的圖片不能傳到網上。另外一方面,矢量圖一般比較小,不過部分比較老的瀏覽器可能不支持矢量圖。還有,若是圖標有不少曲線,那有可能會比位圖還大,因此要明智取捨。

摺疊屏常見適配問題

前面講到摺疊屏的適配,首先是一個設計問題,而後纔是一個適配問題。這裏咱們這裏討論的是違背以上9項基本原則的狀況。如下案例基於三星Galaxy Fold測試。

違背「最大值和最小值「原則

  • 未設置合適的max-width

    因爲設置的max-width較小,在Galaxy Fold展開態下,頁面兩側有空隙。

  • 子元素超出max-width規定範圍

違背」相對單位「原則

這裏」看類似「按鈕使用px設置尺寸,在通常手機上看上去正常,可是在摺疊屏手機上就會顯的很小。採用rem設置尺寸後就顯示正常了。

對摺疊屏的一些暢想

  • 摺疊的方式會愈來愈多,屏幕會愈來愈寬

    如LG最新申請的一項專利顯示,其可能正在研發一款三折手機,未來手機的尺寸可能會更加接近筆記本電腦顯示器尺寸。或許像熱門美劇《西部世界》中展現的手持摺疊電腦在不遠的未來就會實現。

  • 前端交互的方式會更加豐富

    如:「折」手機這個動做能夠算做一個事件(需系統支持提供),若是權限設置合理,能夠用來區分人機,不用再看花眼選圖片了;半折」分屏,實現雙屏聯動。

    目前來講」折「這個事件雖然沒有,然是要識別用戶是有有作摺疊和展開動做,能夠經過監聽resize事件來代替。

  • 屏幕變寬帶來的新的體驗

    好比說,在摺疊屏展開狀態的模式下,你將能夠一邊看直播,一遍看相關產品,兩者相互不影響。

    圖片類應用一是能夠放的更大,看的細節更多,二是能實如今摺疊屏展開狀態下一側看預覽,一側顯示完整圖片,跟方便咱們瀏覽圖片。

    隨着屏幕的變大,一個窗口下可能放下多個任務,同時運行多個APP。

參考:

blog.froont.com/9-basic-pri…

相關文章
相關標籤/搜索