计算html的font size,前端开发js+rem动态计算font-size的大小，适配各种设备！

/p>

content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;”

name=”viewport”

/>

响应式布局

font-size: 20px;

width: 100%;

height: 100%;

}

body {

margin: 0;

padding: 0;

}

header,

footer {

width: 100%;

background: #17a578;

color: #fff;

font-size: 1rem;

text-align: center;

line-height: 2rem;

}

.footer {

position: fixed;

bottom: 0;

}

.box {

}

.public {

width: 5rem;

height: 5rem;

font-size: 1.2rem;

display: inline-block;

text-align: center;

color: #fff;

line-height: 5rem;

margin-top: 1rem;

}

.left {

background: #f00;

}

.center {

background: #048f74;

}

.right {

background: #000;

}

页面头部

左

中

右

左

中

右

页面底部

//orientationchange方向改变事件

;(function(doc, win) {

var docEl = doc.documentElement, //根元素

//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。

resizeEvt =

‘orientationchange’ in window

? ‘orientationchange’

: ‘resize’,

recalc = function() {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

//把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。

docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’

}

//alert(docEl)

if (!doc.addEventListener) return

win.addEventListener(resizeEvt, recalc, false) //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值

doc.addEventListener(‘DOMContentLoaded’, recalc, false) //绑定浏览器缩放与加载时间

})(document, window)

//alert(document.documentElement.clientWidth/320)