1. 程式人生 > >移動端適配不同手機

移動端適配不同手機

移動端
1.不建議字號用rem原因:
考慮到字型的點陣資訊,一般文字尺寸多會採用 16px 20px 24px等值,若以rem指定文字尺寸,會產生諸如21px,19px這樣的值,會導致字形難看,毛刺,甚至黑塊,故大部分文字應該以px設定。
一般標題類文字,可能也有要求隨螢幕縮放,且考慮到這類文字一般都比較大,超過30px的話,也可以用rem設定字型。
2.移動端的1px邊框問題解決方法:

div{
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #e5e5e5;
    -webkit-transform
: scaleX(.5)
; transform: scaleX(.5); }

3.阻止預設事件和阻止冒泡
問題及解決1:在適配移動端時,遇到整屏滾動的內部有其他的觸屏事件,還有滾動條滾動事件,這時候如果在寫整屏滑動中寫了event.preventDefault(),這樣在內部的如果有click事件的時候,click就不能點選, 如果內部有點選事件和滾動條事件,就不能寫event.preventDefault();
問題及解決2:如果整屏滾動的時候,內部有滾動條,在滑動內部滾動條的時候滾動整屏?
在有滾動條事件的元素裡面寫上event.stopPropagation(),來阻止冒泡,從而防止冒泡引起的外部整屏滾動;
問題及解決3:輪播圖觸屏滑動,內部內容需要點選,這時也不能寫阻止預設事件,event.preventDefault(),阻止了就不能點選了,只寫阻止冒泡,以防止對外面整屏觸控滑動事件的影響。