# 移动端适配 > rem是一个相对于根元素字体大小的css单位。与px一样，他可以用来设置字体大小，也可以用来设置长度单位。 > ## viewport visual viewport 可见视口 屏幕宽度 layout viewport 布局视口 DOM宽度 ideal viewport 理想适口：使布局视口就是可见视口 一般情况下我们都需要先这样设置 将layout viewport设置为visual viewport 得到ideal viewport ~~~ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ~~~ ## rem em rem 相对于根元素 em相对于父元素 ## dpr 设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到： 设备像素比 ＝ 物理像素 / 设备独立像素 在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。 ## 步骤 1. meta设置 2. 动态设置scale = 1/dp ~~~ (function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var metaEl = doc.querySelector('meta[name="viewport"]'); var dpr = 0; var scale = 0; // 对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1 if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); // 判断手机版本 安卓 var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);// 判断手机版本 ios var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { dpr = devicePixelRatio; } else { drp = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); // 动态改写meta:viewport标签 if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.documentElement.firstElementChild.appendChild(metaEl); } else { metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); } })(document, window); ~~~ 3. 动态设置font-size 一般先规定一个基准font-size 比如iphone6时为16px，然后根据公式 ~~~ width/fontSize = baseWidth/baseFontSize ~~~ 来算当前设备怎么设置。 ~~~ (function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; /** * ================================================ * 设置根元素font-size * 当设备宽度为375(iPhone6)时，根元素font-size=16px; × ================================================ */ var refreshRem = function () { var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; console.log(clientWidth) if (!clientWidth) return; var fz; var width = clientWidth; fz = 16 * width / 375; docEl.style.fontSize = fz + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, refreshRem, false); doc.addEventListener('DOMContentLoaded', refreshRem, false); refreshRem(); })(document, window); ~~~