使用rem，使字体大小自适应屏幕

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

将以下代码放在入口文件，即可使字体大小自适应屏幕大小

function resize() {let doc = document.documentElement   //返回文档的根节点let width = doc.clientWidth  //获取浏览器窗口文档显示区域的宽度，不包括滚动条let ratio = width / 375  //将屏幕分为375份（当屏幕为375px时，ratio=1px）let fontSize = 10 * ratio //乘10，（当屏幕为375px时，fontSize=10px）if (fontSize > 20) fontSize = 20  //当屏幕为大于等于750px时，fontSize均等于20pxdoc.style.fontSize = fontSize + 'px' //加上单位
}
// 监听resize事件，调整窗口大小，感受rem的作用，这里只考虑竖屏的情况
window.onresize = resize   //window.onresize监听div和屏幕的改变
resize() //调用函数修改fontSize的值（1rem=fontSize）

使用rem，使字体大小自适应屏幕相关推荐

HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
html 字号自适应,html自适应网页里字体大小自适应屏幕的方法
html自适应网页里字体大小自适应屏幕的方法发布时间:2020-11-20 16:40:22 来源:亿速云阅读:216 作者:小新这篇文章主要介绍了html自适应网页里字体大小自适应屏幕的方法, ...
字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...
html 字号自适应,自适应网页中字体大小自适应屏幕 - YangJunwei
页面实现自适应字体大小,可使用 rem 作为单位,rem相对于html根字号来自适应处理,然后使用 media query 来调整 html 元素的 font-size 即可. 网站自适应CSS ht ...
使用阿里云的oss对图片加水印并且字体大小自适应（阿里云oss暂不支持字体大小自适应）
使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应) 背景: 首先阿里云oss云对象存储是不能做到字体大小自适应的,因为在开发中我们的图片上传的尺寸是做不到固定大小宽 ...
pyqt5标签中的字设置不同字体_PyQt5 实现字体大小自适应分辨率的方法
最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况.具体原因可以上网查询,在这里将记录下解决方法. 这里记录两种方法,如果使用的Qt版本在5.6.0之 ...
echarts-折线图-echarts字体大小自适应
<template><div><div><div id="org_ech_li ...
html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...

使用rem，使字体大小自适应屏幕

使用rem，使字体大小自适应屏幕相关推荐

最新文章

热门文章