手機頁面布局方案有好多種,但不管你怎樣做炊汹,都需要用viewport, viewport就不在這談了。
rem布局,rem布局的優(yōu)勢主要是可以通過動態(tài)改變html根節(jié)點(document.documentElement)的font-size縮放整個應(yīng)用荧琼,比較適合web app,web app最好能保持app各元素的大小比例.設(shè)計稿的大小選型就很重要了,選了iphone5這樣的低分辨率出設(shè)計稿,在大屏手機上看就顯得很大很大命锄,尤其是屏幕大堰乔,分辨率卻不高的手機。
寬度用百分比脐恩,高度固定镐侯,這種方案最常見,最在pc和大屏幕手機上看驶冒,有些元素顯得很長苟翻,橫向被拉伸。對于文章閱讀的網(wǎng)站最適合不過了只怎,大的屏幕就應(yīng)該能容納更多的文字才是合理的袜瞬,頁面元素本就不多,核心是文章內(nèi)容身堡。
上面只說了頁面元素的單位應(yīng)該怎么定玄糟。還是沒說布局掂器,布局也有兩種,最主要的是自上而下的布局,此種布局對于網(wǎng)頁的適配非常方便域帐,用戶體驗也好劲适,除非你希望你的什么東西都出現(xiàn)在第一屏齐板,新浪微博的h5手機頁面就采用了頂部導(dǎo)航采章,下面是滾動的內(nèi)容的設(shè)計,體驗蠻好仲翎。淘寶h5頁面痹扇,做得則像淘寶的app,體驗也爛,h5版的淘寶反正本就沒什么人用溯香。底部導(dǎo)航在手機上非常致命,如果你用fixed定位,要加各種占位元素鲫构,防止被底部導(dǎo)航擋住,fixed本就惡心玫坛。界面之間的過渡動畫也不好弄结笨,fixed脫離了父節(jié)點的布局流,如果切換到一個有著完全不同的底部導(dǎo)航的頁面湿镀,動畫的同步將很成問題炕吸,各種蛋疼。
flexbox可以很好地分配屏幕空間,底部導(dǎo)航欄也可以跟隨父節(jié)點"運動"了勉痴,再在分配的部分空間內(nèi)滾動赫模,是非常合適的,看起來很美好蒸矛,卻有一個致命的缺點嘴瓤,當(dāng)你的頁面有輸入框扫外,輸入法出來的時候莉钙,可分配的總空間變小了廓脆,完蛋了,可能有些地方混亂了磁玉。停忿。。蚊伞。席赂。。根據(jù)經(jīng)驗时迫,手機上的輸入框還是放在單獨一個頁面的頂部比較好颅停,下方最好什么東西也不要放,要不然在各種不同手機上的輸入體驗將會很不一致掠拳,如果是用了第三方輸入法的iphone癞揉,很可能在你輸入第一個字符之前,你連輸入框都看不見溺欧。
在手機上喊熟,只要有輸入框的地方,受限就很大姐刁。
其實我也沒有什么好的解決方案芥牌,只是來吐槽的。聂使。有沒有好的經(jīng)驗分享給我看看呀