h5项目自适应字体和宽高。用rem

已知：

1、浏览器默认的字号是16px，html｛font-size: 87.5%;｝（16*0.875 = 14px）。

2、css中的单位换算：rem 与 px 的换算为 px = rem * 设置的根节点字号。

3、注意，html 字体大小最小为 12px；如果设置为10px，则换算后的 px 依然按照 12px 计算

待搞清楚

思路：html的font-size设置为：网页宽度/设计稿宽度*10 px，css设置时就按照设计稿的大小，如宽为10px，css设置成1rem。这样，html的fong-size就相当于等比放大缩小的系数*10。

在网页加载完成后运行如下代码。designWidth是参考的设计稿的网页宽度（我的一般参考375px），maxWidth是设计稿的最大网页宽度，一般为750。运行该函数后，将设计稿的px对应成css的rem就好。比如设计稿中font-size:10px，css为font-size:1rem。

除此之外，在网页代码的头部，加入一行viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

//设置html的font-size

function resizeRem(designWidth, maxWidth) {

var doc = document,

win = window,

docEl = doc.documentElement,

remStyle = document.createElement("style"),

tid;

function refreshRem() {

var width = docEl.getBoundingClientRect().width;

maxWidth = maxWidth || 540;

width > maxWidth && (width = maxWidth);

var rem = width * 10 / designWidth;

remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

}

if (docEl.firstElementChild) {

docEl.firstElementChild.appendChild(remStyle);

} else {

var wrap = doc.createElement("div");

wrap.appendChild(remStyle);

doc.write(wrap.innerHTML);

wrap = null;

}

//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；

refreshRem();

win.addEventListener("resize", function () {

clearTimeout(tid); //防止执行两次

tid = setTimeout(refreshRem, 300);

}, false);

win.addEventListener("pageshow", function (e) {

if (e.persisted) { // 浏览器后退的时候重新计算

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}

}, false);

if (doc.readyState === "complete") {

doc.body.style.fontSize = "16px";

} else {

doc.addEventListener("DOMContentLoaded", function (e) {

doc.body.style.fontSize = "16px";

}, false);

}

巴特西

h5项目自适应字体和宽高。用rem

最新文章

热门文章