rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

事故造成原因:
1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的。
2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了。
3.知道了rem的用法,但是html的font-size到底是多少才合适啊啊啊,妈蛋~。

好了,那么现在来解决这些问题。
在解决之前,麻烦各位大婶要了解一些你可能不想了解的东东(警告:不了解这些就不能知道真相哟~):
1.物理像素(physical pixel)
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒(物理像素)组成的。


2.逻辑像素
是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

3.设备的像素比(device pixel ratio)简称DPR
它的数值体现了物理像素和逻辑像素之间的关系,用公式可以计算出该设备的DPR的大小:

DPR = 物理像素 / 逻辑像素

那么了解了上面这些概念,就可以知道,为什么css在pc上写着font-size=12px;但是换到手机上却变小了?因为DPR啊啊啊,大哥~。
没错,我们在电脑屏幕上的DPR是1,但是手机却不同,可能是它可能是2,也可能是3。获取设备DPR的方法还是有的:
1.在JavaScript中,通过window.devicePixelRatio来获取
2.在css中,可以通过-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同DPR的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

本人也在网上看了不少动态设置rem的文章,下面把几个常用的列举出来:
一,用媒体查询来设置html的font-size:

@media screen and (min-width: 320px) {html {font-size: 14px;}
}@media screen and (min-width: 360px) {html {font-size: 16px;}
}@media screen and (min-width: 400px) {html {font-size: 18px;}
}@media screen and (min-width: 440px) {html {font-size: 20px;}
}@media screen and (min-width: 480px) {html {font-size: 22px;}
}@media screen and (min-width: 640px) {html {font-size: 28px;}
}

二、利用js来动态设置

!(function(doc, win) {var docEle = doc.documentElement,evt = "onorientationchange" in window ? "orientationchange" : "resize",fn = function() {var width = docEle.clientWidth;width && (docEle.style.fontSize = 20 * (width / 320) + "px");};win.addEventListener(evt, fn, false);doc.addEventListener("DOMContentLoaded", fn, false);}(document, window));

我要说的是最后一种,也是我认为目前比较好的实现方法:
利用js计算当前设备的DPR,动态设置在html标签上,并动态设置html的font-size,利用css的选择器根据DPR来设置不同DPR下的字体大小(这个方法很不错哦~)

!function(win, lib) {var timer,doc     = win.document,docElem = doc.documentElement,vpMeta   = doc.querySelector('meta[name="viewport"]'),flexMeta = doc.querySelector('meta[name="flexible"]'),dpr   = 0,scale = 0,flexible = lib.flexible || (lib.flexible = {});// 设置了 viewport metaif (vpMeta) {console.warn("将根据已有的meta标签来设置缩放比例");var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);if (initial) {scale = parseFloat(initial[1]); // 已设置的 initialScaledpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio}}// 设置了 flexible Metaelse if (flexMeta) {var flexMetaContent = flexMeta.getAttribute("content");if (flexMetaContent) {var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);if (initial) {dpr = parseFloat(initial[1]);scale = parseFloat((1 / dpr).toFixed(2));}if (maximum) {dpr = parseFloat(maximum[1]);scale = parseFloat((1 / dpr).toFixed(2));}}}// viewport 或 flexible// meta 均未设置if (!dpr && !scale) {// QST// 这里的 第一句有什么用 ?// 和 Android 有毛关系 ?var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),_dpr = win.devicePixelRatio;// 所以这里似乎是将所有 Android 设备都设置为 1 了dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))? 3: (_dpr >= 2 && (!dpr || dpr >= 2))? 2: 1): 1;scale = 1 / dpr;}docElem.setAttribute("data-dpr", dpr);// 插入 viewport metaif (!vpMeta) {vpMeta = doc.createElement("meta");vpMeta.setAttribute("name", "viewport");vpMeta.setAttribute("content","initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");if (docElem.firstElementChild) {docElem.firstElementChild.appendChild(vpMeta)} else {var div = doc.createElement("div");div.appendChild(vpMeta);doc.write(div.innerHTML);}}function setFontSize() {var winWidth = docElem.getBoundingClientRect().width;if (winWidth / dpr > 540) {(winWidth = 540 * dpr);}// 根节点 fontSize 根据宽度决定var baseSize = winWidth / 10;docElem.style.fontSize = baseSize + "px";flexible.rem = win.rem = baseSize;}// 调整窗口时重置win.addEventListener("resize", function() {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}, false);// 这一段是我自己加的// orientationchange 时也需要重算下吧win.addEventListener("orientationchange", function() {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}, false);// pageshow// keyword: 倒退 缓存相关win.addEventListener("pageshow", function(e) {if (e.persisted) {clearTimeout(timer);timer = setTimeout(setFontSize, 300);}}, false);// 设置基准字体if ("complete" === doc.readyState) {doc.body.style.fontSize = 12 * dpr + "px";} else {doc.addEventListener("DOMContentLoaded", function() {doc.body.style.fontSize = 12 * dpr + "px";}, false);}setFontSize();flexible.dpr = win.dpr = dpr;flexible.refreshRem = setFontSize;flexible.rem2px = function(d) {var c = parseFloat(d) * this.rem;if ("string" == typeof d && d.match(/rem$/)) {c += "px";}return c;};flexible.px2rem = function(d) {var c = parseFloat(d) / this.rem;if ("string" == typeof d && d.match(/px$/)) {c += "rem";}return c;}
}(window, window.lib || (window.lib = {}));

忘了说了,手机淘宝很多页面用的就是这种方法来适配终端的。

然后留个demo,可以看一下手机淘宝用上面方法怎么实现的(用手机扫下面的二维码吧):

移动端应该如何动态设置字体大小?相关推荐

  1. pyqt5动态设置字体大小

    利用QFontDialog组件的getFont()方法进行字体的设置 下面是使用工具栏按钮绑定设置字体的方法进行界面字体设置,设置完成后并进行本地化保存,界面重启时进行加载 利用下面的方式进行工具栏按 ...

  2. 通过JavaScript动态设置字体大小

    <script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.documentElement ...

  3. vue3+element-plus动态设置字体大小

    1.先定义一个字体数据 setup() {const state = reactive({size: 1, //默认字体大小值val: "",//双向绑定的值//字体数组posts ...

  4. iOS模仿微信滑块动态设置字体大小的功能

    首先说一下实现这一功能的核心类别,UITableViewCell+FSAutoCountHeight.这个类其实是利用运行时将每个cell高度通过子控件的约束动态加以控制进而返回一个值,这个值就是我们 ...

  5. Android 代码中动态设置字体大小-TextView.SetTextSize()

    关键代码 - setTextSize(TypedValue.COMPLEX_UNIT_PX,15); //15像素 - setTextSize(TypedValue.COMPLEX_UNIT_SP,1 ...

  6. HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色

    设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...

  7. 根据屏幕大小动态设置字体rem

    //根据屏幕大小动态设置字体rem var docEl = document.documentElement,//当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时,//注意现在当浏览器 ...

  8. WPF中GDI+图形图像的绘制:(一)绘制文本——动态设置字体、大小、颜色

    GDI+(Graphics Device Interface Plus图形设备接口加)是.NET框架的重要组成部分,负责在屏幕和打印机上绘制图形图像和显示信息.GDI+不但在功能上比GDI 要强大很多 ...

  9. 移动端-动态改变字体大小

    // 动态改变字体大小 function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.documentElement.c ...

最新文章

  1. 2022-2028年中国医养结合模式深度调研及投资前景预测报告
  2. java多线程编程01---------基本概念
  3. javascript 传值给前端(ios 安卓)
  4. android4.0 编译报错 Xmx2048m错误 .
  5. js中cookie的操作
  6. flink source 同步_为什么说 Flink + AI 值得期待?
  7. 【Vegas2008】9月19日-青椒炒南瓜
  8. rem适配的浏览器_[史上最全]UI相关尺寸单位详解 | px、pt、dp、sp、rem、vwvh、rpx、ppi、dpi、dppx...
  9. Python 刷题笔记:背包问题
  10. 电力电子技术课程设计matlab,电力电子技术课程设计-基于matlab的单相交流调压电路的设计与仿真.doc...
  11. 人脸识别技术 近期文献整理30篇
  12. java线上文件图片资源存储方案,定时清理垃圾文件
  13. blender 常用修改器
  14. 最优传输传记(optimal transport)一——最优传输模型
  15. C语言——字符串指针-strcmp
  16. 百度网盘+7.9+android,百度云7.9.0永不升级版
  17. HTTP响应头信息泄露
  18. android崩溃系列-崩溃原理分析
  19. 文本域textarea有空格
  20. 手机xbox修改服务器,将Xbox变成个人xCloud服务器:设置截图曝光

热门文章

  1. 晒一晒程序员桌面,你惊呆了没?
  2. Crazy Number---3755
  3. 经典语录-2014330
  4. 飞机大战之六:敌机爆炸(碰撞检测)
  5. MQTT学习笔记——MQTT协议使用
  6. 2018 ACM-ICPC南京网络赛 Magical Girl Haze(分层最短路)
  7. IE不能上网浏览的常见原因和解决方法
  8. iphone 计算机 桌面图标不见了,Mac苹果电脑的应用程序图标消失不见了如何恢复...
  9. F和弦(大横按)的训练方法
  10. 爱心代码表白(可直接复制运行)