同乙個html在不同的移動裝置上顯示效果也有不同.
在剛開始開發移動端的時候,經常遇到不同裝置頁面錯位的問題.網上也有好多種解決方案.
這裡介紹其中一種解決方案.
說方案之前首先得解釋一下單位(px,%,em,rem,vw)
px畫素:相對長度單位。畫素px是相對於顯示器螢幕解析度而言的.
比如說解析度是1366*768,可以想象成是把電腦螢幕分成1366列,768行的**.其中乙個小方塊就是1px
所以用px作為單位,在pad上就會出現字超級大的情況
em:em指字型高，任意瀏覽器的預設字型高都是16px。
所以未經調整的瀏覽器都符合: 1em=16px,它會繼承父級元素的字型大小，
因此並不是乙個固定的值
可能會在content這個div裡把字型大小設為1.2em, 也就是12px。
然後你又把選擇器p的字型大小也設為1.2em，但如果p屬於content的子級的話，
p的字型大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。
這是因為content的字型大小被設為1.2em，這個em值繼承其父級元素body的大小，
也就是16px * 62.5% * 1.2=12px, 而p作為其子級，em則繼承content的字型高，
也就是12px。所以p的1.2em就不再是12px，而是14.4px。
rem:rem 是相對於 html 元素的 font-size 的乙個單位。
如果 html 上定義了 font-size: 20px;，
則無論在任何地方都是 1rem = 20px 這個大小不會受到父元素的影響。
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：
ie9+區域性支援，chrome/firefox/safari/opera支援，ios safari 8+支援，
android browser4.4+支援，chrome for android39支援
單位說明完畢,下面是解決思路
我們使用rem作為單位,不同裝置的寬度不一致,我們可以根據寬度來改變html中的font-size的大小.
這樣每個元素的大小就不是固定的了,都會相對於螢幕去改變.
首先在每個頁面裡加入這段**
(function (doc, win) else
};if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window);
fontsize改變了,rem的大小也就跟著改變了
不同螢幕頁面也會等比例改變
移動端web頁面自適應和rem
web頁面的自適應開發，要求就是跨平台，跨瀏覽器，一般mobile pc，前幾天寫了幾個pc端全屏頁面，用的是百分比，在手機上看了下效果 相去甚遠。這麼看來mobile pc 的自適應 有些時候就是個偽命題。那對於移動端的自適應就 一般的宣傳頁面全屏滑動那種，用百分比，若複雜了就肯定不行，仔細看了下...
移動端web頁面滾動不流暢，卡頓閃爍解決方案
1.ios端的 webkit overflow scrolling屬性可控制頁面滾動效果，設定如下實現慣性滾動和彈性效果 webkit overflow scrolling touch2.position屬性導致的頁面滾動不流暢問題 如上 所示，當absolute定位的容器內存在relative定位...
移動端web頁面滾動不流暢，卡頓閃爍解決方案
1.ios端的 webkit overflow scrolling屬性可控制頁面滾動效果，設定如下實現慣性滾動和彈性效果 webkit overflow scrolling touch 2.position屬性導致的頁面滾動不流暢問題 overflow x hidden overflow y aut...