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 毛玻璃效果
Aug 14 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
html如何对span设置宽度
Oct 30 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
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
swiper自定义分页器的样式
2020/09/14 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python 二维数组90度旋转的方法
2019/01/28 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
幼儿园教师教育感言
2014/02/28 职场文书
岗位职责怎么写
2014/03/14 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android