Html5移动端网页端适配(js+rem)


Posted in HTML / CSS onFebruary 03, 2021

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

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

Html5移动端网页端适配(js+rem)

Html5移动端网页端适配(js+rem)

重启,效果图:

Html5移动端网页端适配(js+rem)

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 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 #HTML / CSS
canvas版人体时钟的实现示例
Jan 29 #HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 #HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 #HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 #HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 #HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 #HTML / CSS
You might like
mysql 搜索之简单应用
2007/04/27 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
js中的闭包实例展示
2018/11/01 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
pywinauto自动化操作记事本
2019/08/26 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
如何安装ruby on rails
2014/02/09 面试题
合伙购房协议样本
2014/10/06 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
狮子林导游词
2015/02/03 职场文书
银行求职信模板
2015/03/20 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
家庭经济困难证明
2015/06/23 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Python Parser的用法
2021/05/12 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android