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

做者：龍朝忠

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

摺疊屏手機概況

華爲Mate X

技術參數：（因爲手機還未正式上市，這裏數據可能有出入）

三星Galaxy Fold

技術參數

柔派-FlexPai

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

微軟 Surfaceduo

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

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

摺疊屏適配的本質

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

產品和設計

• 如何更好的利用空間？
• 如何展現纔不會使頁面顯得空洞？
• 展開和摺疊時分別怎麼展現？
• 展開後如何過渡？
• ……

開發同窗

• 頁面是否顯示正常？
• 是否按產品和設計的預期顯示？
• ……

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

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

從以上摺疊屏手機的狀況來看，摺疊屏手機的適配其實就是一個響應式設計的問題，而響應式設計有一個比較公認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…