JS动态计算移动端rem

发布于2017年2月16日 10:18:37 ,最后一次修改于2017年2月18日 16:50:48

随着互联网的发展,wap端的浏览量已超过了PC端,每个浏览器默认的字体大小也不一样,为了提高用户在咯浏览终端的体验度,就不得不用css3 的rem了。

rem的取值是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需求来定了。下表为常用的px值和rem的对应关系。

px换算成rem(根元素字体大于12px):如果父元素的字体大小为93.5%,而你想设置一个div的宽度为500px,那么对应的rem值为500/15=33.333333rem,如果没有具体设置父元素字体大小,那么rem为500/16=25.0rem。

如果你没有在根元素指定参照值,那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px,那 1rem 就为 20px。

在开发移动端的时候,各种移动设备的分辨率(物理像素)杂七乱八,虽然可以硬性的用media查询去走一步改一步,显得很麻烦也很冗余。为了解决这个问题,于是就有了全适配的js解决方案。

;(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//屏幕分辨率参考ipone5
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
     因为rem是css3新引进的度量单位,目前常用的主流浏览器基本都支持这个属性,还在用IE6-8的人自行更新浏览器吧(IE6 MLGB....)。

本文共 5 个回复

  • Kuwin 2025/11/07 01:00

    kuwin sở hữu kho game đa dạng từ slot đến trò chơi bài đổi thưởng, mang đến cho bạn những giây phút giải trí tuyệt vời.

  • 站群程序 2025/11/10 09:29

    搭载智能站群程序,自动化搭建与管理,为SEO项目提供核心驱动力。站群程序

  • MM88 2025/11/10 16:40

    Khám phá thế giới giải trí trực tuyến đỉnh cao tại MM88, nơi mang đến những trải nghiệm cá cược thể thao và casino sống động.

  • GO88 2025/11/12 17:44

    Tham gia cộng đồng game thủ tại Go88 để trải nghiệm các trò chơi bài, poker phổ biến nhất hiện nay.

  • 站群程序 2025/11/13 18:59

    搭载智能站群程序,自动化搭建与管理,为SEO项目提供核心驱动力。站群程序