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来代替JS实现交互
Aug 10 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php 信息采集程序代码
2009/03/17 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
多个jQuery版本共存的处理方案
2015/03/17 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
小程序开发基础之view视图容器
2018/08/21 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python获取从命令行输入数字的方法
2015/04/29 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
python中doctest库实例用法
2020/12/31 Python
新闻专业本科生的自我评价分享
2013/11/20 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
花店创业计划书范文
2014/02/07 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
党支部评议意见
2015/06/02 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python