PC端自適應使用rem

做乙個pc端的網頁，設計圖是1920x1080，要在常見屏上顯示正常 ，比如：1280x720 1366x768 1440x900 1920x1080。

就要使用rem，width、height、margin、padding、left、top都採用了rem,

**注意：**html的font-size設定的為100px.是為了計算方便.此時body的font-size要設定為正常值,例如14px.不然的話,其它的dom都會繼承html的100px的font-size,導致效果巨大.

1、pc端

當瀏覽器視窗變化時,內容的大小以及相對位置也會相應變化,這個依靠js修改html的font-size值實現.如下:

;(function(win) 

win.addeventlistener('resize', function() , false);
win.addeventlistener('pageshow', function(e) 
}, false);
refreshrem();
})(window);

當設計圖是1920時,規定html的font-size的值是100. 也就是,當瀏覽器視窗調整到1920px時,1rem=100px,如果要設定乙個160px(1920設計圖時)的margin-top,那麼rem設定值是1.6rem.

2、移動端

由於手機上一般不會調整瀏覽器大小,所以可以在頁面載入時,設定一次即可

$(function())

手機平板移動裝置的寬度不超過1080,如果裝置已經超過了這個寬度,則不應再計算html的font-size值了.因為已經是pc螢幕了.

if ( window.innerwidth>1080)

return;

3、移動端適配公升級版

設定px_to_rem為37.5，可以寫死，意思就是使用ipone6螢幕尺寸進行開發

rem**：放在js中

(

function
(win)
setremutils()
;// 視窗變化時觸發
win.
addeventlistener
('resize'
,function()
,false);
win.
addeventlistener
('pageshow'
,function
(e)}
,false);
})(window)

pc端rem適配 自適應PC端網頁製作使用REM

做乙個pc端的網頁,設計圖是1920x1080的.要在常見屏上顯示正常 比例正確可 1280x720 1366x768 1440x900 1920x1080 使用了幾種辦法 1.內容在一屏內顯示的,採用了 內容框 上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是...

rem布局實現pc端網頁自適應

首先，將html的font size設定為100px,方便計算然後將body的font size設定為正常值，例如 12px,不然其他的dom都會繼承html的font size，導致效果差距巨大，再在index.html頁面中寫動態設定font size字型大小的js 當瀏覽器發生變化的時候，內容...

移動端PC端自適應

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