做者:龍朝忠css
隨着三星Galaxy Fold和華爲Mate X的發佈,前端同窗將面臨一個新的任務:摺疊屏的適。摺疊屏雖距離普及可能還有很長一段路,大多數公司還未將摺疊屏列入適配的範圍,可是提早研究下摺疊屏的適配仍是極好的。前端
技術參數:(因爲手機還未正式上市,這裏數據可能有出入)web
技術參數瀏覽器
小廠手機,沒啥知名都,資料較少markdown
最近新出,實際是雙屏手機,暫無詳細資料iphone
從目前推出的這幾款摺疊手機能夠看出:摺疊手機從摺疊到展開,屏幕的變化相似於iphone到ipad。oop
當老闆下令說:「咱們的產品要適配摺疊屏」,不一樣的人會有不一樣的反應:佈局
所以對於咱們開發同窗來講,對摺疊屏的適配首先要肯定一個預期,即要先肯定好交互和設計,才能評估工做。所以「摺疊屏的適配先是一個設計問題,而後纔是一個適配問題」。測試
目前狀況下,產品和設計可能還不會考慮適配摺疊屏的問題,那是否表示開發同窗暫時無事可作呢?不盡然。字體
從以上摺疊屏手機的狀況來看,摺疊屏手機的適配其實就是一個響應式設計的問題,而響應式設計有一個比較公認9條的基本原則,摺疊屏手機的適配至少要知足這9項基本原則。
響應式:響應式是流佈局,它會自動適應屏幕大小,不論是什麼設備。尺寸按比例設置,自動隨瀏覽器尺寸變化而變化;簡單隻有一套代碼;
適應式:自適應則採起多個不一樣的佈局設計,多個屏幕的尺寸,使用哪一個佈局取決於屏幕類型。自適應做品用屏幕尺寸來決定用哪套佈局。複雜,要根據市面上設備區分;
這兩種設計方式彼此相輔相成,因此說也沒有對錯之分。具體狀況要依內容而定。
隨着屏幕尺寸愈來愈小,內容所佔的垂直空間也愈來愈多,也就是說,內容會向下方延伸,這就叫作內容流。
這點對前端指導意義是:對於內容不固定狀況,高度不要固定寫死,寫死高度就要考慮溢出狀況,文本溢出、圖片按比例縮放。
爲了適應不一樣屏幕尺寸和不一樣使用場景,使用絕對單位容易出現問題 。常見的相對單位有em、rem、ch、ex、vw、vh、vmax、vmin。
@media (min-width:800px) and (max-width:1800px) 複製代碼
有時候內容佔滿整個屏幕寬度(例如在移動設備上)是好事,但若是相同的內容在電視屏幕上也撐得滿滿的,就不太合理了。由於強行鋪滿,根據前面的內容流原則,可能會致使頁面顯示異常的大。這就是爲何要有最大/最小值。例如,若是寬度爲100%,最大寬度1000px,那麼內容就會以不超過1000px的寬度填充屏幕。
注意:Max-width和min-widht要設置合理,不能太大也不能過小。
如京東首頁和優酷首頁就遵循了這個原則:
這是一種化零爲整的思想,當多個元素位置是相對的時候,對每一個元素採起響應式佈局處理或許比較麻煩,這時候能夠將這些元素用一個元素包裹起來,這樣實現會更加明瞭和整潔。
這表示適配的起點,是先按手機作而後適配臺式機?仍是先按臺式機作而後適配手機?
使用哪一種根據實際狀況決定,無所謂好壞,對於摺疊屏適配來講確定是手機優先。
想讓本身的網站擁有炫酷的Futura或Didot效果嗎?那就是用web字體吧。儘管web字體看起來很炫酷,但你要記住,這些字體都須要用戶下載,字越多,用戶加載頁面的時間也就越長。另外一方面,系統字體加載速度則快得多(前提是用戶本機就有),但太過普通。
你的圖標是否有不少細節,而且應用了不少華麗的效果?若是是,那就用位圖。若是不是,考慮使用矢量圖。若是是位圖,使用jpg、png或gif。矢量圖則最好使用SVG或圖標字體。其各有利弊。但你要時刻牢記圖標尺寸——未通過優化的圖片不能傳到網上。另外一方面,矢量圖一般比較小,不過部分比較老的瀏覽器可能不支持矢量圖。還有,若是圖標有不少曲線,那有可能會比位圖還大,因此要明智取捨。
前面講到摺疊屏的適配,首先是一個設計問題,而後纔是一個適配問題。這裏咱們這裏討論的是違背以上9項基本原則的狀況。如下案例基於三星Galaxy Fold測試。
未設置合適的max-width
因爲設置的max-width較小,在Galaxy Fold展開態下,頁面兩側有空隙。
子元素超出max-width規定範圍
這裏」看類似「按鈕使用px設置尺寸,在通常手機上看上去正常,可是在摺疊屏手機上就會顯的很小。採用rem設置尺寸後就顯示正常了。
摺疊的方式會愈來愈多,屏幕會愈來愈寬
如LG最新申請的一項專利顯示,其可能正在研發一款三折手機,未來手機的尺寸可能會更加接近筆記本電腦顯示器尺寸。或許像熱門美劇《西部世界》中展現的手持摺疊電腦在不遠的未來就會實現。
前端交互的方式會更加豐富
如:「折」手機這個動做能夠算做一個事件(需系統支持提供),若是權限設置合理,能夠用來區分人機,不用再看花眼選圖片了;半折」分屏,實現雙屏聯動。
目前來講」折「這個事件雖然沒有,然是要識別用戶是有有作摺疊和展開動做,能夠經過監聽resize事件來代替。
屏幕變寬帶來的新的體驗
好比說,在摺疊屏展開狀態的模式下,你將能夠一邊看直播,一遍看相關產品,兩者相互不影響。
圖片類應用一是能夠放的更大,看的細節更多,二是能實如今摺疊屏展開狀態下一側看預覽,一側顯示完整圖片,跟方便咱們瀏覽圖片。
隨着屏幕的變大,一個窗口下可能放下多個任務,同時運行多個APP。
參考: