針對移動端自適應的幾種方法集合

第一種

(

function
(doc, win)
else};
if(!doc.addeventlistener)
return
; win.
addeventlistener
(resizeevt, recalc,
false);
doc.
addeventlistener
('domcontentloaded'
, recalc,
false);
})(document, window)
;

(

function
(doc, win);if
(!doc.addeventlistener)
return
; win.
addeventlistener
(resizeevt, refreshrem,
false);
doc.
addeventlistener
('domcontentloaded'
, refreshrem,
false);
refreshrem()
;})(document, window)
;

網易做法：

引入：頁面開頭處引入下面這段**，用於動態計算font-size

(

function
(doc, win)
// 乘以100，px : rem = 100 : 1
docel.style.fontsize =
100*
(width /
750)
+'px';}
;recalc()
if(!doc.addeventlistener)
return
; win.
addeventlistener
(resizeevt, recalc,
false);
})(document, window)
;

未引入前：

body

body

參考位址

實現手機端自適應布局的幾種方法

1.固定寬度 頭部設定 意思為根據設計稿的大小 640px 以320 iphone5 為基準進行縮放，此方法簡單粗暴高效，在後面的css樣式中只需要根據設計稿的實際大小，根據px來寫即可，可完美自適應大小不同的螢幕。這種方法目前見到的缺點有 縮放會導致有些頁面元素會糊的情況。如果此頁面有可能巢狀在別...

移動端的自適應

1.彈性布局 關鍵元素高度和不變，只有容器在伸縮變換。文字流式，控制項彈性，等比縮放。2.網易做法 a 先拿設計稿豎著的橫向解析度除以10得到body元素的寬度。b 布局時，設計圖標註的尺寸除以10得到css中的尺寸。c 在dom ready以後，通過以下 設定html的font size docu...

寫移動端自適應螢幕的方法

前端移動端開發的時候肯定是會面對不同型號的手機的頁面展示問題的，今天給大家推出另外一種自適應不同移動端的方法，使用vw，vh單位。vw和vh單位的大小是多少？vw和vh是根據裝置的寬度和高度來決定的，裝置的寬就是100vw，裝置的高就是100vh，你設定的50vw就是相當於裝置寬度的50 你設定的1...