首页 > 其他分享 >rem布局,根据屏幕宽度设置html字体大小

rem布局,根据屏幕宽度设置html字体大小

时间:2022-11-21 08:23:07浏览次数:59  
标签:字体大小 html Html 设置 rem 屏幕 resetRootFZ

function resetRootFZ() {
  let Html = document.querySelector('html')
  let w = Html.getBoundingClientRect().width
  // 设置根字体大小
  Html.style.fontSize = w / 10 + 'px'
}

// 初次加载时候设置字体大小
resetRootFZ()

// 屏幕宽度发生改变时,重新设置字体大小
window.addEventListener('resize', function () {
  resetRootFZ()
})

 

标签:字体大小,html,Html,设置,rem,屏幕,resetRootFZ
From: https://www.cnblogs.com/cz-basic/p/16910257.html

相关文章

  • HTML、CSS、JS实现的HTML、CSS、JS编辑器
    Atom通用代码编辑器,Github出品,基于electron​桌面应用平台,https://atom.io/,源代码:https://github.com/atom/atomVisualStudioCode通用代码编辑器,微软出品,基于electron​......
  • 前端之HTML
    HTML介绍Web服务本质importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))sk.listen(5)whileTrue:conn,addr=sk.accept()data=conn.recv(8096)......
  • html中的两个下拉列表动态的加载内容
    <script language="javascript">  varfunctionif(window.ActiveXObject)  new ActiveXObject("Microsoft.XMLHTTP");  else if(window.XMLHttpRequest)  new} ......
  • html 学习
    <imgsrc=""><imgsrc="logo.png"><imgsrc=""><imgsrc="">structure:hpresentation:cssbehavior:js<html></html><br/><head> <title></title></head>......
  • Html:<a>标签中target的作用
    1.定义和用法:<a>标签的target属性规定在何处打开链接文档。如果在一个<a>标签内包含一个target属性,浏览器将会载入和显示用这个标签的href属性命名的、名称与这......
  • 基本的HTML语法
    1.view容器<template><view><text>大家好,晚上好</text><swiper此处可加指示器等属性><swiper-item><text>......
  • HTML标签
    HTML结构           HTML模板HTML:htypertextmarkuplanguage,即超文本标记语言<!DOCTYPEhtml>#按标准最......
  • vue 中 使用flexible+rem 实现页面元素 随窗口大小自适应w
      1.引入flexible.js   这个适用于ui图1920px  其他大小需对应调整flexible.js把屏幕分为24等份 把下面的代码复制到项目中  新建一个js文件(func......
  • HTMLElement HTMLButtonElement html元素类型
    HTMLElementHTMLButtonElement......
  • vba解析html页面
    vba解析html页面Subtest() 'vba解析html页面(字符串)Dimohtml,ohttp,table,byid,byname,byclassname,selectorall,selectorAsObject,sAsString......