页面自适应-rem

最新推荐文章于 2023-07-19 14:51:02 发布

小源写代码

最新推荐文章于 2023-07-19 14:51:02 发布

阅读量675

点赞数

分类专栏：项目功能文章标签： html javascript css3

本文链接：https://blog.csdn.net/weixin_42419575/article/details/122595345

版权

项目功能专栏收录该内容

10 篇文章 0 订阅

订阅专栏

学习目标：

1、rem

学习内容：

1
rem指html.body{font-size: 10px}设置的值（此处1rem=10px）
html中

<template>
	<div id="rightBox1" :style="{ height: pdfheight }">
	</div>
</template>

<script>
	window.onload=function(){ (function(){           
	      var html = document.documentElement;  
	      var windowWidth = html.clientWidth;  
	      html.style.fontSize = windowWidth /15+ 'px';   
	})();}

 data() {
	 return {
	    pdfheight: (window.innerHeight - 110) / 10 + "rem",
	  }
  }
 mounted() {
   window.addEventListener("resize", () => {
       this.pdfheight =(window.innerHeight - 110) / 50 + "rem";
    });
 }
</script>

学习Tips：

window.onload()方法用于在 HTML 文档加载完毕后立刻执行.
常用在：< script >中写代码，操作下文< body >
(若不用，script时未渲染出body，无法获得id=bg)

<script type="text/javascript">
	window.onload=function(){
	    function runoob1(){
	     document.getElementById("bg").style.backgroundColor="#F00";
	    }
	    runoob1();
	}
</script>
</head>
<body>
    <div id="bg"></div>
</body>

document.documentElement 返回文档的 documentElement:
HTML 文档返回对象为HTML元素，如果 HTML 元素缺失，返回值为 null。

小源写代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面自适应-rem

学习目标：1、rem学习内容：1rem指html.body{font-size: 10px}设置的值（此处1rem=10px）html中<template> <div id="rightBox1" :style="{ height: pdfheight }"> </div></template><script> window.onload=function(){ (function(){
复制链接

扫一扫