rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因：

1.px单位在PC上很流行，在手机屏幕上一看，MLGB的，同样的12px却小的跟蚂蚁似的。

2.好不容易在iPhone4上调的正常了，换个菊花牌手机，MBD不堪入目了。

3.知道了rem的用法，但是html的font-size到底是多少才合适啊啊啊，妈蛋~。

好了，那么现在来解决这些问题。

在解决之前，麻烦各位大婶要了解一些你可能不想了解的东东（警告：不了解这些就不能知道真相哟~）：

1. 物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2.逻辑像素

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3.设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR= 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px但是换到手机上却变小了？因为DPR啊啊啊，大哥~。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1.在JavaScript中，通过window.devicePixelRatio来获取

2.在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章，下面把几个常用的列举出来：

一，用媒体查询来设置html的font-size：

@mediascreen and (min-width:320px) {html{font-size:14px}} @mediascreen and (min-width:360px) {html{font-size:16px}} @mediascreen and (min-width:400px) {html{font-size:18px}} @mediascreen and (min-width:440px) {html{font-size:20px}} @mediascreen and (min-width:480px) {html{font-size:22px}} @mediascreen and (min-width:640px) {html{font-size:28px}}

二、利用js来动态设置

!(function(doc, win){vardocEle = doc.documentElement,        evt ="onorientationchange"inwindow?"orientationchange":"resize",        fn =function(){varwidth = docEle.clientWidth            width &&(docEle.style.fontSize =20* (width /320) +"px")        }        win.addEventListener(evt, fn,false)    doc.addEventListener("DOMContentLoaded", fn,false)}(document,window))

我要说的是最后一种，也是我认为目前比较好的实现方法：

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size，利用css的选择器根据DPR来设置不同DPR下的字体大小（这个方法很不错哦~）

!function(win, lib){vartimer,        doc    = win.document,        docElem = doc.documentElement,        vpMeta  = doc.querySelector('meta[name="viewport"]'),        flexMeta = doc.querySelector('meta[name="flexible"]'),        dpr  =0,        scale =0,        flexible = lib.flexible || (lib.flexible = {})// 设置了 viewport metaif(vpMeta) {console.warn("将根据已有的meta标签来设置缩放比例")varinitial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/)if(initial) {            scale =parseFloat(initial[1])// 已设置的 initialScaledpr =parseInt(1/ scale)// 设备像素比 devicePixelRatio}    }// 设置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMeta.getAttribute("content")if(flexMetaContent) {varinitial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),                maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/)if(initial) {                dpr =parseFloat(initial[1])                scale =parseFloat((1/ dpr).toFixed(2))            }if(maximum) {                dpr =parseFloat(maximum[1])                scale =parseFloat((1/ dpr).toFixed(2))            }        }    }// viewport 或 flexible// meta 均未设置if(!dpr &&!scale) {// QST// 这里的 第一句有什么用 ?// 和 Android 有毛关系 ?varu = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),            _dpr = win.devicePixelRatio// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ? ( (_dpr >=3&&(!dpr || dpr >=3))                        ?3: (_dpr >=2&&(!dpr || dpr >=2))                            ?2:1)                :1        scale =1/ dpr    }    docElem.setAttribute("data-dpr", dpr)// 插入 viewport metaif(!vpMeta) {        vpMeta = doc.createElement("meta")                vpMeta.setAttribute("name","viewport")        vpMeta.setAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no")if(docElem.firstElementChild) {            docElem.firstElementChild.appendChild(vpMeta)        }else{vardiv = doc.createElement("div")            div.appendChild(vpMeta)            doc.write(div.innerHTML)        }    }functionsetFontSize(){varwinWidth = docElem.getBoundingClientRect().widthif(winWidth / dpr >540) {            (winWidth =540* dpr)        }// 根节点 fontSize 根据宽度决定varbaseSize = winWidth /10        docElem.style.fontSize = baseSize +"px"        flexible.rem = win.rem = baseSize    }// 调整窗口时重置win.addEventListener("resize",function(){        clearTimeout(timer)        timer = setTimeout(setFontSize,300)    },false)// 这一段是我自己加的// orientationchange 时也需要重算下吧win.addEventListener("orientationchange",function(){        clearTimeout(timer)        timer = setTimeout(setFontSize,300)    },false)// pageshow// keyword: 倒退 缓存相关win.addEventListener("pageshow",function(e){if(e.persisted) {            clearTimeout(timer)            timer = setTimeout(setFontSize,300)        }    },false)// 设置基准字体if("complete"=== doc.readyState) {        doc.body.style.fontSize =12* dpr +"px"    }else{        doc.addEventListener("DOMContentLoaded",function(){            doc.body.style.fontSize =12* dpr +"px"        },false)    }      setFontSize()    flexible.dpr = win.dpr = dpr    flexible.refreshRem = setFontSize    flexible.rem2px =function(d){varc =parseFloat(d) *this.remif("string"==typeofd &&d.match(/rem$/)) {            c +="px"        }returnc    }    flexible.px2rem =function(d){varc =parseFloat(d) /this.remif("string"==typeofd &&d.match(/px$/)) {            c +="rem"        }returnc    }}(window,window.lib || (window.lib = {}))

忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。

媒体查询从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。清单 1. 使用媒体类型<link rel="stylesheet" type="text/css" href="site.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />在清单 1 中，media 属性定义了应该用于指定每种媒体类型的样式表：screen 适用于计算机彩色屏幕。print 适用于打印预览模式下查看的内容或者打印机打印的内容。作为 CSS v3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询 是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如清单 2 中的示例所示。清单 2. 媒体查询规则@media all and (min-width: 800px) { ... }根据清单 2 中的标记，所有最小水平屏幕宽度为 800 像素的屏幕（屏幕和打印等）都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询：@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

关键的地方用用，能不用就不用，用多了代码冗余，非常不好维护，如果大面积用，相当于一个模块就有多了几倍的代码，如果页面数据量大，很影响性能的。

如果产品更注重性能和速度，还是需要放弃一些更完美的视觉体验的。

---