rem和em的区别

来源:http://www.chinese-glasses.com 作者:Web前端 人气:84 发布时间:2020-03-24
摘要:js if (deviceW 640) return; 本文的px转rem换算公式为: document.documentElement.style.fontSize = deviceW / 640 * 100 + 'px'; 根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏

js

if (deviceW > 640) return;

本文的px转rem换算公式为:

document.documentElement.style.fontSize = deviceW / 640 * 100 + 'px';

根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。

computed();

100px = 1rem18px = 0.18rem基础css

> - 而我们布局采用`rem`布局, `width:.5rem`,  意思就是某个物体的宽度值相对于html的字体大小的值的百分比,`width:.5rem` 就是`10bet,width`的值相对于`html`字体大小的百分比为50%。因为html随着屏幕的大小改变,会不停的变化,所以width的值也会跟着改变

时间: 2019-11-11阅读: 82标签: rem

// 添加事件,当设备尺寸改变,就执行computed函数

//designWidth:设计稿的实际宽度值,需要根据实际设置var DesignWidth = 375;//maxWidth:制作稿的最大宽度值,需要根据实际设置var MaxWidth = 375;//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; widthmaxWidth  (width=maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); }})(DesignWidth, MaxWidth);

![rem_-_CSS3参考手册](media/15111820141724/rem_-_CSS3%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C.png)

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;} ul,ol{list-style:none;}a{text-decoration:none;}html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}body{line-height:1.5; font-size:14px;}body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,sans-serif;}b,strong{font-weight:bold;}i,em{font-style:normal;}table{border-collapse:collapse;border-spacing:0;}table th,table td{border:1px solid #ddd;padding:5px;}table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}img{border:0 none;width:auto9;max-width:100%;vertical-align:top; height:auto;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}input:focus{outline:none;}select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video,progress{display:inline-block;}body{background:#fff;}

> ##### 下面是一个动态设置html字体大小的公式

脚本计算 rem单位 需要的基准字体大小

```

> - 以当前的计算公式,若是设备尺寸为640,计算后`html`的字体大小为100px; `1rem` 就是100px; 若是屏幕尺寸缩小到320,`computed`函数会自动获取屏幕的宽度,重新计算html的字体大小,此时`html`字体大小应为50,所以`1rem`就等于50px,

// 当前案例是以640的设计稿为例,判断,若是设备尺寸超过640,就不在执行computed

##### px

// 100 这里的100是在屏幕尺寸为640的时候,html字体大小为100px,之所以设置100,是为了便于计算

##### em

> - `document.documentElement.style.fontSize `=xxxx  这里是设置html字体大小

**注**:以上图片截自 http://www.css88.com/book/css/values/length/em.htm

本文由10bet发布于Web前端,转载请注明出处:rem和em的区别

关键词:

上一篇:HTML5的Websocket(理论篇【10bet】 I)

下一篇:没有了

最火资讯