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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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
杏林同学录(八)
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
理解javascript封装
2016/02/23 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python实现注册登录系统
2017/08/08 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
七年级历史教学反思
2014/02/05 职场文书
大学军训感言400字
2014/03/11 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
小班评语大全
2014/05/04 职场文书
美容院管理规章制度
2015/08/05 职场文书
教师节主题班会方案
2015/08/17 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
python单向链表实例详解
2022/05/25 Python