您现在的位置是：网站首页> 编程资料编程资料

Html5移动端网页端适配(js+rem)详解html5页面 rem 布局适配方法html5中JavaScript removeChild 删除所有节点HTML5中 rem适配方案与 viewport 适配问题详解

2021-08-30 1211人已围观

简介这篇文章主要介绍了Html5移动端网页端适配(js+rem)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js的设置就能做到等比缩放。

下载插件，并修改比例（如果ui尺寸是750就改50 375改25），修改完重启vscode

在这里插入图片描述

重启，效果图：

在这里插入图片描述

2. 新建一个index.js，把下方代码复制进去,即可使用。

 //适配兼容 (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);

到此这篇关于Html5移动端网页端适配(js+rem)的文章就介绍到这了,更多相关Html5移动端网页端适配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：使用HTML和CSS实现的标签云效果(附demo)一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9

下一篇：Canvas在超级玛丽游戏中的应用详解html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

您现在的位置是：网站首页> 编程资料编程资料

Html5移动端网页端适配(js+rem)详解html5页面 rem 布局适配方法html5中JavaScript removeChild 删除所有节点HTML5中 rem适配方案与 viewport 适配问题详解

相关内容

点击排行

本栏推荐

猜你喜欢