移動端自適應

1、js動態設定html的字型大小

var clientwidth = 0;

if(document.documentelement.clientwidth >= 600)
else
document.documentelement.style.fontsize = 50 * clientwidth/375 'px';
window.onresize = function
()else
document.documentelement.style.fontsize = 50 * clientwidth/375 'px';
}

設計稿寬度750px，裝置寬度350px，此時html 的font-size:50px，及1rem=50px; 假設一元素在設計稿上寬度為750px，750/100=7.5rem（7.5*50=375px）。

計算方法：設計稿的尺寸 / 100  =  *** rem；

2、設定html的font-size: 13.33vw

首先要先說明：移動端的設計稿一般是width：750px，height：auto（這裡指的是不確定），100vw = 100%，這個也沒有問題吧；那麼，設計稿拿過來，我們可以得出：750px = 100vw，這個也沒有問題吧，那麼1px等於多少vw呢？ 是不是 1px = 100 / 750 vw = 0.3333vw；那麼100px = 多少vw呢，這個應該知道了吧。100px = 13.33vw；

思路過程：

mobile.width = 750px  => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

即：我們把html: // 也就是以100px位基準；1rem = 100px;

計算方法：設計稿的尺寸 / 100 /2  =  *** rem；

3、設定html的font-size並縮放頁面

var html = document.getelementsbytagname('html')[0];

var width =html.getboundingclientrect().width;
html.style.fontsize = width / 16 'px';
var pixelraio = 1 /window.devicepixelratio;
document.write('')

計算方法：設計稿的尺寸 / 46.875  =  *** rem；

更多專業前端知識，請上

【猿2048】www.mk2048.com

移動端自適應

width device width width為設定layout viewport 的寬度，為乙個正整數，width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值，可以是乙個帶小數的數字，1.0就是佔網頁的100 mi...

移動端PC端自適應

查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...

移動端的自適應

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