rem布局完成响应式开发，通俗且详细的原理解析和代码实现

一、rem布局基本原理

rem可以理解为一个长度单位，单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px，那么1rem就等于16px，0.5rem等于8px。

根据这个原理，如果网页默认的字体大小改变，那么单位rem的大小也会改变，使用rem做单位的HTML元素的大小也会改变。

比如说：页面中一个div的宽度为2rem，在没有其他任何设置的情况下，他的大小就是32px，这时font-size改变为10px，那么这个div的宽度就会改变为20px。

那么如果能把font-size的值和屏幕的大小关联起来，就可以实现屏幕变大>>font-size变大>>单位rem的值变大。有了这样一个关联，只要把页面中元素的单位全部设置为rem，调整相关的参数，就可以实现让页面元素的大小适应屏幕大小。这样不管你的网页是在iphone6/7/8、华为中兴还是小米魅族上显示，都能完美的适配。

二、rem布局代码实现

var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');
var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 37.5+ 'px';

好多人用过这段代码，但是具体涵义却都很模糊，这里将详细的解析一下：

var pixclPatio = 1 / window.devicePixelRatio;

window.devicePixelRatio：设备像素比，设备的实际像素/逻辑像素，实际像素很好理解，就是我们的物理设备屏幕像素点的个数，而css所用的px则是逻辑像素，通常逻辑像素和实际像素是不同的，通过这个window对象，我们就可以知道他们的比值。

name="viewport"

viewport是设备显示网页的屏幕区域，viewport的宽高也就是屏幕逻辑像素的宽高。这个网站是被很多大神推荐过的，可以查阅不同型号手机的逻辑像素http://viewportsizes.com/

值得注意的是，很多浏览器会把viewport的宽度设置为980px，比如safari。为了解决这一问题，就需要这行代码：

<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />

width=device-width 表示将viewport宽度设置为设备实际的宽度，
initial-scale、minimum-scale、maximum-scale分别表示用户初始的缩放比例、最小缩放比例和最大缩放比例；

如果这个缩放比例如果是1，那么1px逻辑像素=1像素点实际像素。如果比例是2，1px就等于2像素点。将他的缩放设置为1*1/window.devicePixelRatio（也就是代码中的变量pixclPatio），每个1px=逻辑像素/实际像素个像素点，那么整个html也会放大逻辑像素/实际像素倍。

var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 37.5+ 'px';

最后，获取html的宽度，将html的宽度/37.5赋值给字体的大小。

就实现了 设备 >> 像素比 >> 屏幕缩放 >> html >> font-size >> rem 这样一个传递链，也就实现了我们前面说的适配不同型号的设备。

要注意的是，这个37.5并不是固定的，只是设置为37.5正好在iphone6/7/8上1rem=20px，在iphone plus上等于30px，具体的大小可以根据需要来设置。

三、rem+响应式布局

上述方法只适应于手机，如果想让页面在手机端电脑端都能完美显示，还需要设置响应式布局：

 

<link media="screen and (max-width:640px)" rel="stylesheet" type="text/css" href="phone.css">

 

使用第二部分的rem布局之后，页面的宽度会被改变，我们在使用max-width:640px就匹配不到手机了。

为了解决这一问题，可以在js里加一个条件判断，这样css样式就可以正常引入：

if (window.screen.width < 640){
    document.write('<link rel="stylesheet" href="css/phone.css">');
}

汇总一下，代码就是这样：

var pixclPatio = 1 / window.devicePixelRatio;
if (window.screen.width < 800){
    document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixclPatio + ',minimum-scale=' + pixclPatio + ',maximum-scale=' + pixclPatio + ',user-scalable=no" />');
    var html = document.getElementsByTagName('html')[0];
    var pageWidth = html.getBoundingClientRect().width;
    html.style.fontSize = pageWidth / 37.5+ 'px';
    document.write('<link rel="stylesheet" href="css/phone.css">');
}

 

这个代码虽然使用简单方便，但还是存在一些问题，比如加载比较慢、无法适配手机横屏等问题，如果您有更好的解决方法，欢迎批评指正。