先上**
window.onload = function();window.onresize = function();
function getrem(pwidth,prem)
首先我們要明白為什麼使用rem,rem有什麼作用?螢幕寬度 / 設計圖寬度 = 0.5(比例);rem: 繼承於html的font-size大小,比如html的font-size等於16px,那麼1rem 就等於16px。
這裡既然rem可以繼承 html 的font-size的大小,我們可以使用 監聽視窗的大小,來動態改變html 的font-size 來使得頁面相容於各個移動端手機。
舉例移動端 螢幕寬除以設計圖寬得到比例,比如螢幕寬等於750px,設計圖寬等於1000px,750除以1000得到0.75px,等於說是設計圖的1px,在瀏覽器上展示的大小為0.75px,
這裡我們要繼承這個比例大小,採用rem的方法,繼承html的font-size大小的方法去實現,設定html的font-size等於 0.75px(螢幕的0.75px相當於設計圖的1px),
rem會繼承html的font-size大小,所以我們在頁面裡面使用的1rem就等於設計圖的1px,
後面可以忽略(為了方便我們可以把得到的設計圖和螢幕寬的比例乘以100,等於75,現在1rem等於設計圖的100px,0.01rem等於設計圖的1px。
公式 螢幕寬度 / 設計圖寬度 * 100 = html font-size(0.01rem 等於設計圖的 1px)
螢幕 0.5px = 設計圖 1px;
螢幕 0.5px * 100 = 設計圖 1px * 100
螢幕 50px = 設計圖 100px
設定 html font-size: 50px;
1rem = 50px = 設計圖 100px;
設計圖元素 32px = 0.32rem
有什麼不足或錯誤的,請大家指出,第一次發部落格,發一下自己的感悟和理解
移動端rem學習理解
rem和px的區別所有現代瀏覽器下預設字型尺寸是16px,這時1em 16px。然後你人為的把body裡面定義font size 12px 把瀏覽器預設16px改小了 此刻1em 12px,如果0.8em實際等於12px 0.8 em的用處是你要整個網頁字型統一變大變小你只要改body裡面font ...
移動端rem使用
1 移動端設計圖750時,html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫,設計圖為750px時,頁面標註大小除以100即可,例如 設計圖標註的是,寬300px,高300px。使用rem就是,widt...
移動端使用rem布局
移動端的px其實指的是pt,也就是邏輯解析度。以iphone6為例,寬度是750px,但是在css中iphone6的寬度是375px,也就是375pt,而設計稿一般是750px的。所以在移動端中css的px是設計稿中px的一半。將設計稿中的px轉換為移動端中的px 如果設計稿是750px的,在其中有...