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

  • 时间:2018-10-31 23:06 作者:努力的椰子 来源:努力的椰子 阅读:88
  • 扫一扫,手机访问
摘要:昨天文章中,有粉丝评论说现在移动设施那么多,使用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)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部