html中的rem做响应式,使用rem制作响应式网站

1.rem可以适配不同分辨率

具体来说，有的屏幕640px宽。有的750px宽，有的甚至更大或者更小，如果是用固定的px单位，要么导致大的放不下，或者是小的很难看。

如果元素大小固定占屏幕的百分之X就可以解决问题了。

比如640px的10%是64px，750px的10%是75px。

如果10个10%宽度的元素放在一起，就会正好铺满整个屏幕，不会超出也不会留白。

简单理解

rem就是指屏幕宽度的百分之X

或者说，n个rem = 用户可视区域100%宽度

注意：之所以不说高度，是因为高度(屏幕纵向)方向的内容可以通过滚动屏幕来查看。

文字实例理解

1.设计师给定了一个640px宽度的设计图。

2.假定64rem = 100%宽度(这里是640px)，那么1rem = 10px。

3.按照这种比例写出了静态页面，将设计图上的元素大小，全部用rem写下。

4.可以看到静态页面在640px宽度的页面上显示正常。

5.某用户使用的是320宽度的手机，因为你假设的64rem = 100%宽度，因此此时1rem = 5px(320 / 64 = 5)，因此也完美的显示。

2.rem的使用方法

1.rem是css单位；

2.1rem的大小是通过html下的font-size这个css属性告诉浏览器的；

3.使用rem替换px所在的位置即可。

假设预设的1rem = 10px，然后一个元素(class = ‘ele’)的宽度是20px，高度是30px，那么css写成下面的格式：

html{

font-size: 10px;

}

.ele{

width: 2rem;

height: 3rem;

}

3.应用到各种分辨率下

发现问题了吗？由于屏幕分辨率各不一样，因此我们没有办法确定1rem等于多少px。

原因是rem是css中使用的单位，css是不会帮忙计算1rem等于多少px，只能通过自己来计算。

计算方式很简单：

1.设计稿A(假定是640px)，有一个预设的rem和px的比例B(假如是1rem = 10px)

2.获取用户浏览器的可是区域的宽度C(假如是320px),那么此时1rem的尺寸D可以根据B/A = D/C这个公式计算出来

3.原因是假定的屏幕可以容纳多少个rem，这是一个固定的比例(如这里就是64rem)

1rem = B / A * C;

//代入可得

1rem = 10px / 640px * 320px = 5px;

4.其他

1.页面加载前就得设置好1rem的尺寸(记得是设置在html元素下的font-size)；

2.加载完成后，用户的页面尺寸可能会改变(这种情况往往是出现在PC端，我们需要重新设置1rem等于多少px)

整体的代码如下，直接复制使用，放到页面的head里面。

var fun = function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

//这里是假设在1920px宽度设计稿的情况下，1rem = 100px；

// 可以根据实际需要修改

docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

};

fun(document, window);

rem的上段写法多种多样，原理万变不离其宗，在贴出一种笔者使用过的方法，个人习惯讲1rem设置成100px。由于PC端和移动端往往是两套UI，故通过判断屏幕大小区分PC端和移动端，进而计算出1rem等于多少px，这里使用的是$(window).width()判断的，也可以使用if ( window.innerWidth>1080) 来判断：

$(window).resize(function ()// 绑定到窗口的这个事件中

{

if($(window).width() >= 1000){

let designSize = 1920; // 设计图尺寸

let html = document.documentElement;

let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

}else{

let designSize = 750; // 设计图尺寸

let html = document.documentElement;

let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

}

});

$(window).ready(function ()// 绑定到窗口的这个事件中

{

if($(window).width() >= 1000){

$('.container').show().prev().hide();

let designSize = 1920; // 设计图尺寸

let html = document.documentElement;

let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

}else{

let designSize = 750; // 设计图尺寸

let html = document.documentElement;

let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

}

});