行動端動態設定字體大小的實例詳解
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、最後跳到個人資訊管理頁面，滑動【個人化內容推薦】後方的按鈕即可設定。
大麥怎麼設定搶票倒數計時
Apr 01, 2024 pm 07:01 PM
大麥網購票時，為了確保能夠準確掌握購票時間，用戶可以設定一個懸浮時鐘來進行搶票，詳細的設定方法就在下文中，讓我們一起學習下吧。大麥綁定懸浮時鐘方法1.在手機中點擊開啟懸浮時鐘app進入介面後，在設定秒殺提查的位置點擊，如下圖所示位置：2.來到新增記錄的頁面後，把在大麥網中複製的買票連結頁面複製進去。 3.接下來在下方設定秒殺時間和通知時間，打開【儲存到日曆】後面的開關按鈕，並在下方點選【儲存】。 4.點選開啟【倒數計時】，如下圖所示：5.到提醒時間時在下方點選【開始畫中畫】的按鈕。 6.購票時間到時
微博怎麼設定水印在中間_微博設定水印在中間方法
Mar 29, 2024 pm 03:31 PM
1.先進入微博，然後點選右下角我，選擇【客服】。 2.然後在搜尋框中輸入【浮水印】選擇【設定微博圖片浮水印】。 3.再去點選介面中的【連結】。 4.接著在新開啟的視窗中點選【圖片浮水印設定】。 5.最後勾選【圖片中心】點選【儲存】即可。
