前台必备:rem与px的屏幕自适应争夺战

  • 时间:2018-10-31 23:06 作者:努力的椰子 来源:努力的椰子 阅读:59
  • 扫一扫,手机访问
摘要:昨天文章中,有粉丝评论说现在移动设施那么多,使用rem的方式会比我的自适应的方式更好。于是我就查询资料,对着两方面进行了比照和验证。先来说一下rem的适应方式的基本原理:简单来说,rem就是用根元素的字体大小作为单位来进行布局的方式。这样相当于有了一个全局的参考系,不用单独针对某一部分去进行特别解决
前台必备:rem与px的屏幕自适应争夺战

昨天文章中,有粉丝评论说现在移动设施那么多,使用rem的方式会比我的自适应的方式更好。于是我就查询资料,对着两方面进行了比照和验证。

先来说一下rem的适应方式的基本原理:简单来说,rem就是用根元素的字体大小作为单位来进行布局的方式。这样相当于有了一个全局的参考系,不用单独针对某一部分去进行特别解决,根据调整字体的大小达到自适应的目的。展现效果就是等比缩放。像素计算公式

1rem = 1px * html.fontsize(仅为逻辑公式,看懂就好)

具体参考如下:

通过css来实现适应变化

 



无标题文档



CSS实例:DIV宽度会随浏览器宽度变化,改变浏览器宽度



通过js来实现,提供一个具体方法逻辑,实验的过程大家自行完成

function(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 * 100 / 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);
}
};

个人观点:

rem的兴起主要是因为移动互联网的兴起,移动设施因为分辨率不会产生变化,是rem发挥功能最佳场所。《淘宝产品十年事》这本书里,作者把产品分为大致三种类型:平台型、垂直型、网站型,这点我非常的认同。

这三类产品中,网站型产品和垂直型产品是客户体验统一性很高的,可以通过有效地方式取得数据,分析客户行为,选择合适的方法。rem的布局方式更适应此类开发。

平台型产品目前主要还是pc端使用居多,客户调研困难,业务复杂,产品负责人较多,开辟过程中产品需求变化较多,使用前台必备:自适应所有分辨率的神技中样式分类的方式在界面上的改动更灵活。

  • 全部评论(0)
手机二维码手机访问领取大礼包
返回顶部