모바일 단말기에서 글꼴 크기를 동적으로 설정하는 예에 대한 자세한 설명
- 零下一度원래의
- 2017-06-29 11:25:341227검색
rem Origin: 루트 요소의 글꼴 크기, rem은 단위이며 단위 크기는 1세대 조상의 font-size 크기에 따라 결정됩니다. 이제 프런트엔드 코더는 모든 화면에서 건강한 웹페이지를 보기 위해 조용히 자신의 건강을 희생하고 있습니다. 왜냐하면 rem이 하나의 단위라는 것을 알아야 할 뿐만 아니라 더 중요한 것은 페이지를 다른 방식으로 렌더링하는 방법을 알아야 하기 때문입니다. 매우 NB.
사고 원인:
1.px 단위는 PC에서 매우 인기가 높습니다. 모바일 화면으로 보면 MLGB는 12px과 동일하지만 개미만큼 작습니다.
2. 아이폰4에서 드디어 정상으로 조정한 뒤, 국화 브랜드 폰으로 바꾸니 MBD가 보기 흉했습니다.
3. 렘 사용법은 알겠는데 html의 적절한 글꼴 크기는 무엇입니까?
자, 이제 이 문제를 해결해 보겠습니다.
문제를 해결하기 전에 알고 싶지 않은 몇 가지 사항을 이해하시기 바랍니다(경고: 이를 이해하지 못하면 진실을 알 수 없습니다~):
1.물리적 픽셀
우리가 보는 모든 화면은 육안으로 보기 어려운 작은 입자(물리적 픽셀)로 구성되어 있습니다.
2. 논리 픽셀
은 컴퓨터 좌표계의 한 점입니다. 이 점은 프로그램에서 사용할 수 있는 가상 픽셀(예: CSS 픽셀)을 나타냅니다.
3 장치 픽셀 비율(장치 픽셀 비율)은 DPR
이라고 합니다. 이 값은 물리적 픽셀과 논리 픽셀 간의 관계를 반영합니다. 장치의 DPR 크기는 다음을 사용하여 계산할 수 있습니다. 공식:
DPR = 物理像素 / 逻辑像素
위의 개념을 이해한 후 CSS가 PC에서는 font-size=12px;라고 표시되지만 휴대폰으로 전환하면 작아지는 이유를 알 수 있나요? 민주공화국 때문에요 형님~. 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
window.devicePixelRatio🎜🎜🎜2를 통해 얻을 수 있습니다. device-pixel-ratio, -webkit-min-device-pixel-ratio 및 -webkit-max-device-pixel-ratio는 다양한 미디어 쿼리를 수행합니다. DPR 장치는 일부 스타일 적응을 수행합니다(이는 웹킷 코어가 있는 브라우저 및 웹뷰에만 해당됩니다). 🎜🎜🎜🎜저는 인터넷에서 rem을 동적으로 설정하는 방법에 대한 많은 기사를 읽었습니다. 다음은 일반적으로 사용되는 몇 가지 기사입니다. 🎜🎜🎜 🎜🎜🎜먼저 미디어 쿼리를 사용하여 html의 글꼴 크기를 설정하세요. 🎜🎜 <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>🎜 🎜둘째, js를 사용하여 동적으로 설정 🎜🎜rrreee🎜🎜마지막으로 말씀드리고 싶은 것은 현재로서는 더 나은 구현 방법이라고 생각합니다. 🎜🎜🎜js를 사용하여 현재 장치의 DPR을 계산하고, 그리고 HTML 태그에 동적으로 설정하고 HTML의 font-size를 동적으로 설정하고, CSS 선택기를 사용하여 DPR에 따라 다른 DPR에서 글꼴 크기를 설정합니다(이 방법은 매우 좋습니다~) 🎜🎜rrreee위 내용은 모바일 단말기에서 글꼴 크기를 동적으로 설정하는 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3 - @keyframes다음 기사：CSS3 - @keyframes