移动端字体适配

末蓝、 2023-10-03 09:54 1阅读 0赞

添加事件监听：element.addEventListener("click", functionDemo);

移除事件监听：element.removeEventListener("click", functionDemo);

1.  第一个参数是事件的类型 (如 "click" 或 "mousedown").
2.  第二个参数是事件触发后调用的函数。
3.  第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"

效果：点击页面任何一处，都会触发弹框：Hello window.addEventListener!

window.addEventListener("click", function() {
    	alert("Hello window.addEventListener!");
    });

效果：当页面大小被改动时字体大小自适应（如页面最大化，最小化等）

方式一：

// 移动端适配
    function setRootFontSize() {
    	var width = document.documentElement.clientWidth,fontSize;
    	if (width > 750) {
    		width = 750;
    	}
    	fontSize = (width / 750) * 100;
    	document.getElementsByTagName("html")[0].style["font-size"] = fontSize + "px";
    }
    setRootFontSize();
    window.addEventListener("resize",function() {
    		setRootFontSize();
    },false);

方式二：

document.addEventListener('DOMContentLoaded', function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端适配

@charset "utf-8"; /* 涉及到的H5新标签，之后课程做介绍 */ html{ color:000;/*默认字体颜色黑色*...

本是古典何须时尚/ 2024年04月20日 00:24/ 0 赞/ 121 阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 199 阅读

相关移动端适配

视觉稿规范2点：1 以iphone6的 375 \ 667 为基点; 　　　　　　　2 对于retina屏幕（dpr=2），为了高清，视觉稿的画布是基准的2倍：就会变成75

水深无声/ 2023年08月17日 16:20/ 0 赞/ 200 阅读

相关 PC端和移动端如何实现字体适配

rem与适配 rem介绍： rem的出现解决了em的计算问题，rem的参照物就是根元素（html）的font-size，这让我们对于不同的页面设置全局标准的成为可能

淩亂°似流年/ 2022年10月23日 01:55/ 0 赞/ 312 阅读

相关移动端适配

rem计算JS方式计算尺寸参照的标准尺寸 750px 换算比例为 100:1 （100px=1rem 50px=0.5rem 5px=0.05rem）

Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 454 阅读

相关移动端适配

移动端适配一、移动端适配是什么？二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调

客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 448 阅读

相关移动端适配

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][

怼烎@/ 2022年05月27日 23:28/ 0 赞/ 448 阅读

相关移动端适配

1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc

水深无声/ 2022年03月17日 06:14/ 0 赞/ 404 阅读

相关移动端适配

移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0

冷不防/ 2022年01月29日 03:13/ 0 赞/ 492 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 487 阅读