移動(dòng)端適配方案（rem）
移動(dòng)端適配方案（rem）
適配原理：通過 js 動(dòng)態(tài)設(shè)置 html 的 font-size
1.設(shè)置 meta viewport 屬性
1 | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> |
2.添加動(dòng)態(tài)設(shè)置 html 的 font-size 的 js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 750; width > maxWidth && (width = maxWidth); //設(shè)置最大寬度 width < 375 && (width = 375); //設(shè)置最小寬度 var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會執(zhí)行2次； refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止執(zhí)行兩次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 瀏覽器后退的時(shí)候重新計(jì)算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); }})(750, 750); |
本文鏈接：http://m.jmtianhui.com/news/details-12-291.html
版權(quán)聲明：
1：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，并且以計(jì)算機(jī)技術(shù)研究交流為目的，僅供大家參考、學(xué)習(xí)，不存在任何商業(yè)目的與商業(yè)用途，如描述有誤或者學(xué)術(shù)不對之處歡迎及時(shí)提出，不甚感謝。
2、 如涉及版權(quán)問題，請聯(lián)系我們4724325@qq.com第一時(shí)間處理；
我們從以下三個(gè)方面，對比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁面生成方式，逐一展開分析。
用JS的正則表達(dá)式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編
css制作扇形
純CSS3文字Loading動(dòng)畫特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補(bǔ)全并推斷值的類型。
PHP作為Web界第一大語言近年來熱度不夠，但是這幾年的進(jìn)步和成長卻沒有中斷。在2022伊始，我們來一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來的特性。
Linux程序前臺后臺切換：在Linux終端運(yùn)行命令的時(shí)候，在命令末尾加上 & 符號，就可以讓程序在后臺運(yùn)行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達(dá)式支持 多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會導(dǎo)致 Python 不能正確使用多行模式。