移动端动态设置字体大小的实例详解
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下的字体大小（这个方法很不错哦~）
<span style="font-size: 18px"><code>!<span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">win, lib) {<span class="hljs-keyword">var timer,
doc = win.document,
docElem = doc.documentElement,
vpMeta = doc.querySelector(<span class="hljs-string">'meta[name="viewport"]'),
flexMeta = doc.querySelector(<span class="hljs-string">'meta[name="flexible"]'),
dpr = <span class="hljs-number">0,
scale = <span class="hljs-number">0,
flexible = lib.flexible || (lib.flexible = {}); <span class="hljs-comment">// 设置了 viewport meta<span class="hljs-keyword">if (vpMeta) { <span class="hljs-built_in">console.warn(<span class="hljs-string">"将根据已有的meta标签来设置缩放比例");<span class="hljs-keyword">var initial = vpMeta.getAttribute(<span class="hljs-string">"content").match(<span class="hljs-regexp">/initial\-scale=([\d\.]+)/); <span class="hljs-keyword">if (initial) {
scale = <span class="hljs-built_in">parseFloat(initial[<span class="hljs-number">1]); <span class="hljs-comment">// 已设置的 initialScale
dpr = <span class="hljs-built_in">parseInt(<span class="hljs-number">1 / scale); <span class="hljs-comment">// 设备像素比 devicePixelRatio
}
}<span class="hljs-comment">// 设置了 flexible Meta<span class="hljs-keyword">else <span class="hljs-keyword">if (flexMeta) {<span class="hljs-keyword">var flexMetaContent = flexMeta.getAttribute(<span class="hljs-string">"content");<span class="hljs-keyword">if (flexMetaContent) { <span class="hljs-keyword">var initial = flexMetaContent.match(<span class="hljs-regexp">/initial\-dpr=([\d\.]+)/),
maximum = flexMetaContent.match(<span class="hljs-regexp">/maximum\-dpr=([\d\.]+)/); <span class="hljs-keyword">if (initial) {
dpr = <span class="hljs-built_in">parseFloat(initial[<span class="hljs-number">1]);
scale = <span class="hljs-built_in">parseFloat((<span class="hljs-number">1 / dpr).toFixed(<span class="hljs-number">2));
} <span class="hljs-keyword">if (maximum) {
dpr = <span class="hljs-built_in">parseFloat(maximum[<span class="hljs-number">1]);
scale = <span class="hljs-built_in">parseFloat((<span class="hljs-number">1 / dpr).toFixed(<span class="hljs-number">2));
}
}
} <span class="hljs-comment">// viewport 或 flexible<span class="hljs-comment">// meta 均未设置<span class="hljs-keyword">if (!dpr && !scale) {<span class="hljs-comment">// QST<span class="hljs-comment">// 这里的 第一句有什么用 ?<span class="hljs-comment">// 和 Android 有毛关系 ?<span class="hljs-keyword">var u = (win.navigator.appVersion.match(<span class="hljs-regexp">/android/gi), win.navigator.appVersion.match(<span class="hljs-regexp">/iphone/gi)),
_dpr = win.devicePixelRatio; <span class="hljs-comment">// 所以这里似乎是将所有 Android 设备都设置为 1 了
dpr = u ? ( (_dpr >= <span class="hljs-number">3 && (!dpr || dpr >= <span class="hljs-number">3))
? <span class="hljs-number">3
: (_dpr >= <span class="hljs-number">2 && (!dpr || dpr >= <span class="hljs-number">2))
? <span class="hljs-number">2
: <span class="hljs-number">1
)
: <span class="hljs-number">1;
scale = <span class="hljs-number">1 / dpr;
}
docElem.setAttribute(<span class="hljs-string">"data-dpr", dpr); <span class="hljs-comment">// 插入 viewport meta<span class="hljs-keyword">if (!vpMeta) {
vpMeta = doc.createElement(<span class="hljs-string">"meta");
vpMeta.setAttribute(<span class="hljs-string">"name", <span class="hljs-string">"viewport");
vpMeta.setAttribute(<span class="hljs-string">"content",<span class="hljs-string">"initial-scale=" + scale + <span class="hljs-string">", maximum-scale=" + scale + <span class="hljs-string">", minimum-scale=" + scale + <span class="hljs-string">", user-scalable=no"); <span class="hljs-keyword">if (docElem.firstElementChild) {
docElem.firstElementChild.appendChild(vpMeta)
} <span class="hljs-keyword">else {<span class="hljs-keyword">var div = doc.createElement(<span class="hljs-string">"div");
div.appendChild(vpMeta);
doc.write(div.innerHTML);
}
} <span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">setFontSize(<span class="hljs-params">) {<span class="hljs-keyword">var winWidth = docElem.getBoundingClientRect().width; <span class="hljs-keyword">if (winWidth / dpr > <span class="hljs-number">540) {
(winWidth = <span class="hljs-number">540 * dpr);
} <span class="hljs-comment">// 根节点 fontSize 根据宽度决定<span class="hljs-keyword">var baseSize = winWidth / <span class="hljs-number">10;
docElem.style.fontSize = baseSize + <span class="hljs-string">"px";
flexible.rem = win.rem = baseSize;
} <span class="hljs-comment">// 调整窗口时重置
win.addEventListener(<span class="hljs-string">"resize", <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">) {
clearTimeout(timer);
timer = setTimeout(setFontSize, <span class="hljs-number">300);
}, <span class="hljs-literal">false);
<span class="hljs-comment">// 这一段是我自己加的<span class="hljs-comment">// orientationchange 时也需要重算下吧
win.addEventListener(<span class="hljs-string">"orientationchange", <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">) {
clearTimeout(timer);
timer = setTimeout(setFontSize, <span class="hljs-number">300);
}, <span class="hljs-literal">false);
<span class="hljs-comment">// pageshow<span class="hljs-comment">// keyword: 倒退 缓存相关
win.addEventListener(<span class="hljs-string">"pageshow", <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">e) {<span class="hljs-keyword">if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, <span class="hljs-number">300);
}
}, <span class="hljs-literal">false); <span class="hljs-comment">// 设置基准字体<span class="hljs-keyword">if (<span class="hljs-string">"complete" === doc.readyState) {
doc.body.style.fontSize = <span class="hljs-number">12 * dpr + <span class="hljs-string">"px";
} <span class="hljs-keyword">else {
doc.addEventListener(<span class="hljs-string">"DOMContentLoaded", <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">) {
doc.body.style.fontSize = <span class="hljs-number">12 * dpr + <span class="hljs-string">"px";
}, <span class="hljs-literal">false);
}
setFontSize();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = setFontSize;
flexible.rem2px = <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">d) {<span class="hljs-keyword">var c = <span class="hljs-built_in">parseFloat(d) * <span class="hljs-keyword">this.rem;<span class="hljs-keyword">if (<span class="hljs-string">"string" == <span class="hljs-keyword">typeof d && d.match(<span class="hljs-regexp">/rem$/)) {
c += <span class="hljs-string">"px";
}<span class="hljs-keyword">return c;
};
flexible.px2rem = <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">d) {<span class="hljs-keyword">var c = <span class="hljs-built_in">parseFloat(d) / <span class="hljs-keyword">this.rem; <span class="hljs-keyword">if (<span class="hljs-string">"string" == <span class="hljs-keyword">typeof d && d.match(<span class="hljs-regexp">/px$/)) {
c += <span class="hljs-string">"rem";
}<span class="hljs-keyword">return c;
}
}(<span class="hljs-built_in">window, <span class="hljs-built_in">window.lib || (<span class="hljs-built_in">window.lib = {}));<br/><br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>手机淘宝很多页面用的就是这种方法来适配终端的。<br/><br/><br/><br/></span>以上是移动端动态设置字体大小的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
抖音如何设置定时发布作品时间？它如何设置视频时间长短？
Mar 27, 2024 pm 06:11 PM
在抖音上发布作品能够更吸引关注和点赞，但有时候我们可能难以实时发布作品，这时就可以利用抖音的定时发布功能。抖音的定时发布功能允许用户在预定的时间自动发布作品，这样可以更好地规划发布计划，增加作品的曝光率和影响力。一、抖音如何设置定时发布作品时间？要设置定时发布作品时间，首先进入抖音个人主页，在右上角找到“+”按钮，点击进入发布页面。在发布页面右下角有一个钟表的图标，点击进入定时发布界面。在界面中，你可以选择要发布的作品类型，包括短视频、长视频和直播等。接下来，你需要设置作品的发布时间。抖音提供了
VSCode 设置中文：完全指南
Mar 25, 2024 am 11:18 AM
VSCode设置中文：完全指南在软件开发中，VisualStudioCode（简称VSCode）是一个常用的集成开发环境。对于使用中文的开发者来说，将VSCode设置为中文界面可以提升工作效率。本文将为大家提供一个完整的指南，详细介绍如何将VSCode设置为中文界面，并提供具体的代码示例。第一步：下载安装语言包在打开VSCode后，点击左
抖音标签在哪里设置出来？它怎么打标签，才能精准推流呢？
Mar 27, 2024 am 11:01 AM
抖音作为全球最受欢迎的短视频平台之一，让每个人都能成为创作者，分享生活中的点点滴滴。对于抖音用户来说，标签是一个非常重要的功能，它可以帮助用户更好地分类和检索内容，同时也能让平台更精准地推送合适的内容给用户。那么，抖音标签在哪里设置出来呢？本文将详细介绍如何在抖音上设置和使用标签。一、抖音标签在哪里设置出来？在抖音上使用标签可以帮助用户更好地分类和标记自己的作品，让其他用户更容易找到并关注。设置标签的方法如下：1.打开抖音APP，并登录你的账号。2.点击屏幕下方的“+”号，选择“发表”按钮。3.
微博怎么设置定时发布_微博设置定时发布方法教程
Mar 29, 2024 pm 03:51 PM
1、打开微博客户端，在编辑页面中点击三个小点，再点击定时发。2、点击定时发之后，在发布时间右侧就有时间选项，设置好时间，编辑好文章，点击右下角的黄色字定时发布即可。3、微博手机端暂时不支持定时发布，只能在PC客户端使用该功能哦！
请勿打扰模式在iPhone中不起作用：修复
Apr 24, 2024 pm 04:50 PM
即使在“请勿打扰”模式下接听电话也可能是一种非常烦人的体验。顾名思义，请勿打扰模式可关闭来自邮件、消息等的所有来电通知和警报。您可以按照这些解决方案集进行修复。修复1–启用对焦模式在手机上启用对焦模式。步骤1–从顶部向下滑动以访问控制中心。步骤2–接下来，在手机上启用“对焦模式”。专注模式可在手机上启用“请勿打扰”模式。它不会让您的手机上出现任何来电提醒。修复2–更改对焦模式设置如果对焦模式设置中存在一些问题，则应进行修复。步骤1–打开您的iPhone设置窗口。步骤2–接下来，打开“对焦”模式设
抖音推荐和精选在哪里设置
Mar 27, 2024 pm 05:06 PM
抖音推荐和精选在哪里设置?在抖音短视频中是有精选和推荐两个分类，多数的用户不知道推荐和精选如何的设置，接下来就是小编为用户带来的抖音推荐和精选设置方法教程，感兴趣的用户快来一起看看吧！抖音使用教程抖音推荐和精选在哪里设置1、首先打开抖音短视频APP进入到主页面，点击右下角【我】专区选择右上角【三个横线】;2、之后在右侧会展开功能栏，滑动页面选择最底部的【设置】;3、然后在设置功能页面，找到其中的【个人信息管理】服务;4、最后跳转到个人信息管理页面，滑动【个性化内容推荐】后方的按钮即可设置。
微博怎么设置水印在中间_微博设置水印在中间方法
Mar 29, 2024 pm 03:31 PM
1、首先进入微博，然后点击右下角我，选择【客服】。2、然后在搜索框中输入【水印】选择【设置微博图片水印】。3、再去点击界面中的【链接】。4、接着在新打开的窗口中点击【图片水印设置】。5、最后勾选【图片中心】点击【保存】即可。
大麦怎么设置抢票倒计时
Apr 01, 2024 pm 07:01 PM
大麦网购票时，为了确保能够准确掌握购票时间，用户可以设置一个悬浮时钟来进行抢票，详细的设置方法就在下文中，让我们一起学习下吧。大麦绑定悬浮时钟方法1.在手机中点击打开悬浮时钟app进入界面后，在设置秒杀提查的位置点击，如下图所示位置：2.来到新增记录的页面后，把在大麦网中复制的买票链接页面复制进去。3.接下来在下方设置好秒杀时间和通知时间，打开【保存到日历】后面的开关按钮，并在下方点击【保存】。4.点击开启【倒计时】，如下图所示：5.到提醒时间时在下方点击【开始画中画】的按钮。6.当购票时间到时
