모바일 단말기에서 글꼴 크기를 동적으로 설정하는 예에 대한 자세한 설명
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>font-size를 동적으로 설정하고, CSS 선택기를 사용하여 DPR에 따라 다른 DPR에서 글꼴 크기를 설정합니다(이 방법은 매우 좋습니다~) 🎜🎜rrreee위 내용은 모바일 단말기에서 글꼴 크기를 동적으로 설정하는 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7517
15
1378
52
79
11
53
19
21
66
Douyin에 작품을 게시할 예정 시간을 어떻게 설정하나요? 비디오 지속 시간은 어떻게 설정합니까?
Mar 27, 2024 pm 06:11 PM
Douyin에 작품을 게시하면 더 많은 관심과 좋아요를 받을 수 있지만 때로는 실시간으로 작품을 게시하는 것이 어려울 수 있습니다. 이 경우 Douyin의 예약 출시 기능을 사용할 수 있습니다. Douyin의 예약 출시 기능을 통해 사용자는 예정된 시간에 자동으로 작품을 게시할 수 있으므로 출시 계획을 더 잘 계획하고 작품의 노출과 영향력을 높일 수 있습니다. 1. Douyin에 작품을 게시할 예정 시간을 어떻게 설정하나요? 출시 예정 시간을 설정하려면 먼저 Douyin의 개인 홈페이지로 이동하여 오른쪽 상단에 있는 "+" 버튼을 찾아 클릭하여 출시 페이지로 들어갑니다. 게시 페이지 오른쪽 하단에 시계 아이콘이 있습니다. 클릭하면 예약 게시 인터페이스로 들어갑니다. 인터페이스에서는 짧은 동영상, 긴 동영상, 라이브 방송 등 게시하려는 작품 유형을 선택할 수 있습니다. 다음으로, 작업이 게시될 시간을 설정해야 합니다. 틱톡이 제공하는
VSCode를 사용하여 중국어 설정: 전체 가이드
Mar 25, 2024 am 11:18 AM
중국어 VSCode 설정: 전체 가이드 소프트웨어 개발에서 Visual Studio Code(줄여서 VSCode)는 일반적으로 사용되는 통합 개발 환경입니다. 중국어를 사용하는 개발자의 경우 VSCode를 중국어 인터페이스로 설정하면 작업 효율성이 향상될 수 있습니다. 이 기사에서는 VSCode를 중국어 인터페이스로 설정하는 방법을 자세히 설명하고 특정 코드 예제를 제공하는 완전한 가이드를 제공합니다. 1단계: 언어 팩을 다운로드하고 설치합니다. VSCode를 연 후 왼쪽을 클릭합니다.
Douyin 태그는 어디에 설정되어 있나요? 정확하게 푸시될 수 있도록 태그를 어떻게 지정해야 합니까?
Mar 27, 2024 am 11:01 AM
세계에서 가장 인기 있는 단편 비디오 플랫폼 중 하나인 Douyin을 통해 모든 사람이 창작자가 되어 삶의 모든 순간을 공유할 수 있습니다. Douyin 사용자에게 태그는 매우 중요한 기능입니다. 태그는 사용자가 콘텐츠를 더 잘 분류하고 검색하는 데 도움이 될 뿐만 아니라 플랫폼이 사용자에게 적절한 콘텐츠를 더 정확하게 푸시할 수 있게 해줍니다. 그렇다면 Douyin 태그는 어디에 설정되어 있나요? 이 글에서는 Douyin에서 태그를 설정하고 사용하는 방법을 자세히 설명합니다. 1. Douyin 태그는 어디에 설정되어 있나요? Douyin에서 태그를 사용하면 사용자가 자신의 작품을 더 잘 분류하고 라벨을 지정할 수 있어 다른 사용자가 해당 작품을 더 쉽게 찾고 팔로우할 수 있습니다. 라벨을 설정하는 방법은 다음과 같습니다. 1. Douyin 앱을 열고 계정에 로그인합니다. 2. 화면 하단의 "+" 기호를 클릭하고 "게시" 버튼을 선택하세요. 삼.
웨이보 예약 게시 설정 방법_웨이보 예약 게시 설정 방법 튜토리얼
Mar 29, 2024 pm 03:51 PM
1. Weibo 클라이언트를 열고 편집 페이지에서 세 개의 작은 점을 클릭한 다음 예약된 게시물을 클릭합니다. 2. 게시 예약을 클릭하면 게시 시간 오른쪽에 시간 옵션이 표시됩니다. 시간을 설정하고 기사를 편집한 후 오른쪽 하단의 노란색 단어를 클릭하면 게시를 예약할 수 있습니다. 3. 현재 웨이보 모바일 버전은 예약 게시를 지원하지 않습니다. 이 기능은 PC 클라이언트에서만 사용할 수 있습니다.
iPhone에서 방해 금지 모드가 작동하지 않음: 수정
Apr 24, 2024 pm 04:50 PM
방해 금지 모드에서 전화를 받는 것조차 매우 짜증나는 경험이 될 수 있습니다. 이름에서 알 수 있듯이 방해 금지 모드는 모든 수신 전화 알림과 이메일, 메시지 등의 알림을 끕니다. 다음 솔루션 세트를 따라 문제를 해결할 수 있습니다. 수정 1 – 초점 모드 활성화 휴대폰에서 초점 모드를 활성화합니다. 1단계 – 위에서 아래로 스와이프하여 제어 센터에 액세스합니다. 2단계 – 다음으로 휴대폰에서 "초점 모드"를 활성화합니다. 집중 모드는 전화기에서 방해 금지 모드를 활성화합니다. 수신 전화 알림이 전화기에 표시되지는 않습니다. 수정 2 - 초점 모드 설정 변경 초점 모드 설정에 문제가 있는 경우 이를 수정해야 합니다. 1단계 – iPhone 설정 창을 엽니다. 2단계 – 다음으로 집중 모드 설정을 켭니다.
Douyin 권장 사항 및 선택 사항을 설정하는 위치
Mar 27, 2024 pm 05:06 PM
Douyin의 추천과 선택은 어디에 있나요? Douyin 짧은 동영상에는 선택과 추천이라는 두 가지 범주가 있습니다. 대부분의 사용자는 추천과 선택을 설정하는 방법을 모릅니다. 다음은 편집자가 사용자에게 제공하는 Douyin 짧은 동영상입니다. 오디오 추천과 선택한 설정 방법 튜토리얼, 관심 있는 사용자가 와서 살펴보세요! Douyin 사용 튜토리얼 Douyin 추천 및 선택 설정 위치 1. 먼저 Douyin 짧은 비디오 앱을 열고 메인 페이지에 들어가서 오른쪽 하단에 있는 [Me] 영역을 클릭하고 오른쪽 상단에 있는 [가로선 세 개]를 선택합니다. 2. 그러면 오른쪽의 기능 표시줄이 확장되고 페이지를 밀어 하단의 [설정]을 선택합니다. 3. 그런 다음 설정 기능 페이지에서 [개인 정보 관리] 서비스를 찾습니다. 정보 관리 페이지 슬라이드 [맞춤 콘텐츠 추천] 】뒷면의 버튼을 설정할 수 있습니다.
다마이(Damai) 티켓 구매 카운트다운 설정 방법
Apr 01, 2024 pm 07:01 PM
Damai.com에서 티켓을 구매할 때 티켓 구매 시간을 정확하게 파악할 수 있도록 사용자는 플로팅 시계를 설정하여 티켓을 얻을 수 있습니다. 자세한 설정 방법은 다음과 같습니다. Damai 바인딩 부동 시계 방법 1. 휴대폰에서 부동 시계 앱을 클릭하여 열고 인터페이스로 들어간 후 아래 그림과 같이 플래시 세일이 설정된 위치를 클릭합니다. 2. 해당 페이지로 이동한 후 새 기록을 추가하려면 Damai.com을 클릭하세요. 복사된 티켓 구매 링크 페이지를 복사하세요. 3. 다음으로 아래 플래시 세일 시간과 알림 시간을 설정하고, [캘린더에 저장] 뒤의 스위치 버튼을 켜고, 아래 [저장]을 클릭하세요. 4. 아래 그림과 같이 클릭하여 [카운트다운]을 켭니다. 5. 알림 시간이 되면 아래의 [Picture-in-Picture 시작] 버튼을 클릭합니다. 6. 티켓 구매 시간이 되었을 때
웨이보 중간에 워터마크 설정하는 방법_웨이보 중간에 워터마크 설정하는 방법
Mar 29, 2024 pm 03:31 PM
1. 먼저 웨이보에 접속하신 후 오른쪽 하단의 나를 클릭하신 후 [고객센터]를 선택하세요. 2. 검색창에 [워터마크]를 입력한 후 [Weibo 이미지 워터마크 설정]을 선택하세요. 3. 그런 다음 인터페이스에서 [링크]를 클릭합니다. 4. 새로 열린 창에서 [이미지 워터마크 설정]을 클릭하세요. 5. 마지막으로 [Picture Center]를 체크한 후 [저장]을 클릭하세요.
