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

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

當設計圖是1920時，規定html的font-size的值就是100，當瀏覽器視窗為1920時，1rem = 100px

如下：

function

setrem()
window.
addeventlistener
('load'
,setrem)
window.
addeventlistener
('resize'
,setrem)

@function

px2rem
($px)

這時，我們只需要在使用px的地方使用 px2rem這個方法，就能自動換算成rem單位的大小，例如：

.circle

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

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

PC端自適應使用rem

做乙個pc端的網頁，設計圖是1920x1080，要在常見屏上顯示正常 比如 1280x720 1366x768 1440x900 1920x1080。就要使用rem，width height margin padding left top都採用了rem,注意 html的font size設定的為10...

rem布局實現自適應

使用em和rem單位進行布局，相對 百分比布局更加靈活，可以根據瀏覽器的字型大小調整和縮放來相應顯示頁面。但因為em是相對父級元素的font size，想想就複雜。而rem是相對於根元素html的font size進行計算，繞開了複雜的層級關係，更加簡單。瀏覽器預設字型大小為16px，轉化關係為 1...