Rem簡單使用

2021-08-15 07:03:53 字數 2713 閱讀 9609

一.使用原則：只有固定的寬度和高度才使用rem，其它的可以採用百分比布局

注意：

<


metaname="viewport"content="width=device-width, initial-scale=1.0">
二.原理：rem只和根標籤html的font－size的數值有關，也就是說1 rem＝當前螢幕的html的font－size的大小，所以要想做的適配不同解析度的螢幕，就要根據不同解析度的螢幕來動態是在font－size的大小。就可以通過js 設定如1rem＝10px；核心**如下：

<


script>


varfun =function(doc, win) ;


if(!doc.addeventlistener)return;


win.addeventlistener(resizeevt, recalc,false);


doc.addeventlistener('domcontentloaded', recalc,false);


}fun(document,window);


script>
三.舉個��

（1）index.html

html>


<


htmllang="en">


<


head>


<


metacharset="utf-8">


<


metaname="viewport"content="width=device-width, initial-scale=1.0">


<


title>rem測試使用


title>


<


linkrel="stylesheet"href="./css/index.css">


head>


<


body>


<


divclass=>


div>


<


script>


varfun =function(doc, win) ;


if(!doc.addeventlistener)return;


win.addeventlistener(resizeevt, recalc,false);


doc.addeventlistener('domcontentloaded', recalc,false);


}fun(document,window);


script>


body>


html>
（2）css

*ul,liahtmlimg
（3）當為iphone7的時候顯示的效果：

當為iphone7plus ：

當為三星s5的時候顯示效果如下：

可以發現，顯示效果能夠很好的適應不同的解析度的螢幕～

簡單使用rem方案適配移動裝置

方法一 function rem docel.style.fontsize osize px window.addeventlistener resize rem,false rem 方法二 function computed window.addeventlistener evt,computed...

rem學習使用

rem是相對單位 r 意思root根元素，html標籤 大小是基於html元素的字型大小 em大小是基於父元素的字型大小 lang en style font size 60px charset utf 8 titletitle body em.rem style head class em aaa...

如何使用rem單位

最近搞移動端，真是被rem em與px的換算要了老命了，看了不少文件，似乎弄明白了，這不今天用又矇圈了。好多文件上老是說用rem就給html設定font size，用em就給body設定font size 看了下bootstrap樣式表，html body 其他樣式略哈，就講這兩個主要的。可惜大姐長...