移動端布局方式
阿新 • • 發佈：2018-03-01
應該 plus 列表 有效 至少 樣式 方案 index 什麽
方法一:用流式布局,px做css單位,在大屏小屏自動適應,我之前一直用這種方法,適合於簡單的頁面,比如說列表頁,寫法比較簡單,不用考慮太多 缺點是: 1.頁面雖然展示正常,卻不是等比縮放,在高清屏上難免看起來怪怪的(px換算統一除以2,在dpr是2.5或者3上看起來偏小) 方法二:用rem布局. rem:css單位,相對於網站根元素,即根據html元素的font-size來計算大小,比如說html的font-size大小為50px,一個div的width為1rem,則div的width大小為50px,所以在不同屏上,只要我們動態的算出html的大小,則可起到一改俱改的效果,實現等比例放大縮小,因為html的font-size是等比算出來的. 這裏有一個需要註意的
然後,css裏可以這樣寫:
這就是我們經常在h5頁面看到,為什麽用rem布局還要動態設置這個data-dpr的原因,可以給css處理不同dpr留下鉤子.用rem布局做css單位,很多時候我們元素div的font-size是不需要用rem的,我們還是想用px給文字設置大小,這個時候這個鉤子就顯得很 有用了.
這裏涉及到怎麽把設計稿的px換算成rem,網上有很多詳細的教程,鏈接在後面.
方法三:淘寶的lib-flexible方案
淘寶的這個方案,是rem布局+viewport設置(iOS),就是在iOS系統上,動態的設置viewport,如下:
iphone5
iphone6 plus
在iOS上,這種方案真的不錯,解決了很多問題,1px的問題也解決了,具體實現方案後面放鏈接.
但是在安卓上呢?淘寶的這種方案在安卓是統一設置viewport的縮放為1的,因為安卓機上這個值設置了不一定有效,比如說0.5或者0.333,安卓機上可能都會解析為1
這個時候怎麽處理呢?我們可能會想,反正安卓上dpr都是1,而蘋果上dpr現在至少都是2,那麽我們可以根據這個來做區分,
這樣確實可以做區分,但是有一個問題我們沒考慮到,就是安卓機上也有高清屏的,這麽說,我們在dpr=1設置了1px,在ios上自動縮放,可能顯示0.5或者0.333,但是在安卓機上呢?在大部分dpr等於1上顯示1px,但是在那些高清安卓機上呢?顯示的是2px甚至3px,這個時候應該怎麽處理?
理一下:這個時候的問題是,ios上都沒問題了,1px也很細,但是安卓上,1px還是很粗,可以怎麽辦呢?大部分安卓機並沒有像蘋果那樣的retina屏,所以在大部分情況下我們會對這個問題忽略,即ios上顯示細的1px,而android上顯示的相對粗一些.
當然,如果安卓上也一定要跟ios上顯示一樣細,也可以有其他方法,這個可以查看H5頁面1PX的實現,有很多種方案,比如通過偽元素來縮放,背景實現,抑或是圖片實現等等.網上有很多相關文章.
用淘寶這個方案,有個註意點:
用了淘寶這個方案,是不能用媒體查詢的,比如說在ipone6上,body的寬度是750,在ipone6 plus上,body的寬度是1000+,這樣我們應用媒體查詢時,某個應用到1000+的樣式,就會應用到ipone6 plus上(這情況不是bug,是正常的情況,跟viewport有關).
如果我們不是用淘寶的這套方案,那麽ipone6上,body的寬度是375,在ipone6 plus上,body的寬度是414,這樣我們應用媒體查詢時,某個應用到1000+的樣式,就不會應用到ipone6 plus上.
雖然不能用媒體查詢,但是可以用dpr查詢,如下
綜上,我們總結下:
1.當我們做的H5頁面是單純的web app,跟PC不是同一套時,即我們不需要用到媒體查詢時,我們可以用淘寶這個方案,這個方案解決了ios上高清屏的問題,而且可以像我們平時寫css代碼一樣,很方便,只是編寫過程中就是換算有點麻煩(有工具);
2.雖然說簡單的頁面我們可以用流式布局,但是能做到等比例放大縮小就更好了,所以建議H5用rem布局;
3.安卓上如果一定要實現細的1px,需要使用其他方法來實現,比如上面說的偽元素縮放,背景實現,圖片實現等等.
文章相關鏈接
1.布局解析:http://www.h5cn.com/html5/jishu/201616797_2.html
2.淘寶方案lib-flexible,px換算成rem:
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral
3.viewport文章:http://www.cnblogs.com/2050/p/3877280.html
4.h5 1px問題解決方案:http://www.tuicool.com/articles/ZRv6bun
web移動端布局方式整理
寫H5頁面一直寫的有點隨意,只是保證了頁面在各個屏幕下顯示良好,卻沒有保證到在各個屏幕下是等比例放大或者縮小.這些天在寫一些頁面,試著看看能不能寫出等比例放大縮小的頁面,發現不容易啊,在網上找了一些文章,整理如下:
(只說方案,具體實現看大神的文章)方法一:用流式布局,px做css單位,在大屏小屏自動適應,我之前一直用這種方法,適合於簡單的頁面,比如說列表頁,寫法比較簡單,不用考慮太多 缺點是: 1.頁面雖然展示正常,卻不是等比縮放,在高清屏上難免看起來怪怪的(px換算統一除以2,在dpr是2.5或者3上看起來偏小) 方法二:用rem布局. rem:css單位,相對於網站根元素,即根據html元素的font-size來計算大小,比如說html的font-size大小為50px,一個div的width為1rem,則div的width大小為50px,所以在不同屏上,只要我們動態的算出html的大小,則可起到一改俱改的效果,實現等比例放大縮小,因為html的font-size是等比算出來的. 這裏有一個需要註意的
| 1 |
<html lang="en" data-dpr="1" style="font-size: 32px;"> |
| 1 |
[data-dpr="1"] div{ //處理代碼 }
|
| 1 |
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
|
| 1 |
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
|
| 1 |
[data-dpr="1"] div{ //處理代碼 }
|
| 1 |
@media only screen and (-webkit-min-device-pixel-ratio:1.5){ //處理代碼 }
|
我們也可以配合data-dpr來處理,如下:
| 1 2 3 4 |
@media only screen and (-webkit-max-device-pixel-ratio:3){
[data-dpr="1"] body{
}
}
|
移動端布局方式