业务场景：由于需求是适配两头屏幕，以是刚开始想的css用rem写，但是照旧会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放设置，加上rem和这个js的设置就能做到等比缩放。 下载插件，并修改比例 （假如ui尺寸是750就改50 375改25），修改完重启vscode
重启，结果图：
2. 新建一个index.js，把下方代码复制进去,即可利用。 [code] //适配兼容 (function (doc, win) { console.log(doc, win) // var docEle = doc.documentElement; const dpr = Math.min(win.devicePixelRatio, 3), scale = 1 / dpr, resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalCulate = function () { var docEle = document.documentElement, w = docEle.clientWidth, num = (w > 750 ? 750 : w) / 750; // **此时的750就是你操持稿的尺寸 docEle.style.fontSize = (num * 100).toFixed(1) + 'px'; }; recalCulate(); if (!doc.addEventListener) return; win.addEventListener(resizeEvent, recalCulate, false); })(document, window); [/code]到此这篇关于Html5移动端网页端适配(js+rem)的文章就先容到这了,更多相干Html5移动端网页端适配内容请搜索脚本之家从前的文章或继续浏览下面的相干文章，希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/763304.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:45 , Processed in 0.034923 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
