實習期間主要在寫微信端H5,遇到的最大問題就是適配各個不同尺寸的屏幕。公司就我自己一個前端,只能自己摸索著來。

方法1:媒體查詢

這是最笨工作量最大的方法了,就是一個屏幕尺寸一個屏幕尺寸的適配,當然你沒辦法適配到所有的手機型號,有的手機比較奇葩,同樣是5.5寸,有的矮胖,有的瘦高。我的方法是以iphone6為準,然后向上適配5.5寸,向下適配4.7的iphone5,這個時候就能自適應市場上的一些主流屏幕,然后在對其他品牌手機挑一部分手動適配。

對于工作量小的項目,這個方法還是簡單有效的,當然沒辦法覆蓋所有設備,只是一個沒辦法的辦法,這樣做其實很痛苦,工作量也大。

方法2:定高不定寬

對于流式布局的頁面,我們只要把寬度設置為百分比,而高度設置為px,這樣寬度就可以自適應,高度由于是流式布局,損失一點美感,再搭配簡單的媒體查詢,不會對布局造成太大的影響。

不過我在工作中寫的最多的是一些比較不常規(guī)的頁面,比如下面的這個蛋和錘子都是用絕對定位放上去的,這個時候不管是寬度還是高度都得照顧到。

剛開始我為了讓這顆蛋乖乖待在一個位置,用媒體查詢寫了好多位置和大小寬度,費時費力。

移動開發(fā)培訓,Android培訓,安卓培訓,手機開發(fā)培訓,手機維修培訓,手機軟件培訓

方法3:神奇的 vh、vw

網(wǎng)友評論