html页面字体自适应屏幕大小,根据屏幕宽度适应font-size文字大小

article/2025/10/24 18:28:27

html页面字体自适应屏幕大小,根据屏幕宽度适应font-size文字大小

    • js代码
    • px单位改为rem

js代码

<script TYPE="text/javascript"> 	 var docEl = document.documentElement;
function setRemUnit () {var rem = docEl.clientWidth / 19.2; // 可根据不同电脑分辨率进行手动修改(如1920*1080 为19.2docEl.style.fontSize = rem + 'px'
}setRemUnit()window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}
})
</script>

px单位改为rem

将CSS中所有font-size px单位改为 rem

修改前

div {font-size: 16px;
}

修改后

div {/* px值除以100,即为 rem 单位值 */font-size: 0.16rem;
}

在这里插入图片描述伸缩拉动网页,可以看到会变小或者变大
在这里插入图片描述


http://chatgpt.dhexx.cn/article/ICJt0Au0.shtml

相关文章

如何让Html页面在不同的设备自适应布局

提示&#xff1a;本人第一次写博客&#xff0c;内容仅供参考&#xff0c;希望对看到这篇文章的人有所帮助 文章目录 前言一、什么是自适应布局&#xff1f;二、用什么方法 百分比布局三、呈现的效果四、总结 前言 团队在写项目中经常会遇到不同电脑的屏幕尺寸不一样&#xff0c…

css 自适应方法

1&#xff0c;css calc()方法 calc()能让你给元素的做计算&#xff0c;你可以给一个div元素&#xff0c;使用百分比、em、px和rem单位值计算出其宽度或者高度&#xff0c;比如说“width:calc(50% 2em)”&#xff0c;这样一来你就不用考虑元素DIV的宽度值到底是多少&#xff…

普通的html如何写自适应

首先&#xff0c;引入flexible.js //designWidth:设计稿的实际宽度值&#xff0c;需要根据实际设置 //maxWidth:制作稿的最大宽度值&#xff0c;需要根据实际设置 //这段js的最后面有两个参数记得要设置&#xff0c;一个为设计稿实际宽度&#xff0c;一个为制作稿最大宽度&…

如何实现响应式(自适应)网页

响应式网页 什么是响应式布局为什么会造成布局混乱META标签相对度量FLEX布局宽高设置媒体查询替换元素响应式框架 什么是响应式布局 响应式网页&#xff08;Responsive Web&#xff0c;RW&#xff09;又称自适应网页&#xff0c;是一种网页设计布局&#xff0c;可以根据访问媒…

基于html+css的自适应展示4

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

前端自适应实现方法

一、自适应的分类 1、大屏幕显示更多内容 描述&#xff1a;即根据固定像素大小&#xff0c;显示内容根据显示器分辨率决定&#xff0c;分辨率越大&#xff0c;显示内容越多。 适应性&#xff1a;适合没有图表的页面&#xff0c;因为图表一般用作大屏展示&#xff0c;而大屏一…

html移动端布局与页面自适应布局

常见的布局方式&#xff0c;这里指的是对于width和height在不同页面情况下的改变&#xff0c; 1.比如使用px&#xff0c;就是固定其高宽&#xff0c;不论页面怎样放大缩小&#xff0c;其占领的依旧是&#xff0c;使用px固定了的高宽。 2.又比如弹性布局&#xff0c;没有设置内容…

HTML页面与浏览器自适应

先看需求&#xff0c;打开了一个页面&#xff0c;正常打开没有问题&#xff0c;但是一旦把浏览器缩小&#xff0c;各种样式都发生了变化&#xff0c;还有一些页面有空余。 碰到这种问题&#xff0c;我们首先想到的就是页面的长宽是写死的&#xff0c;比如使用weight:120px;这类…

HTML简易自适应布局

效果图&#xff1a; 第一步&#xff1a;在body下先建三个块级&#xff0c;代码如下&#xff1a; <div class"one">第1个元素中的内容</div> <div class"two">第2个元素中的内容</div> <div class"three">第3个元…

人脸识别系列(一):dlib安装和使用

Dlib是较流行的人脸识别的开源库&#xff0c;使用c编写&#xff0c;里面包含了许多的机器学习算法&#xff0c;在python中也可以使用。Dlib保持着很好的更新节奏&#xff0c;文档也写得相当清晰&#xff0c;涉及到的资源都有标明在哪里下载&#xff0c;是一个优秀的人脸识别开源…

人脸识别经典开源项目

Face Recognition 是一个基于 Python 的人脸识别库&#xff0c;它还提供了一个命令行工具&#xff0c;让你通过命令行对任意文件夹中的图像进行人脸识别操作。 该库使用 dlib 顶尖的深度学习人脸识别技术构建&#xff0c;在户外脸部检测数据库基准(Labeled Faces in the Wild …

人脸检测库libfacedetection介绍

libfacedetection是于仕琪老师放到GitHub上的二进制库&#xff0c;没有源码&#xff0c;它的License是MIT&#xff0c;可以商用。目前只提供了windows 32和64位的release动态库&#xff0c;主页为https://github.com/ShiqiYu/libfacedetection&#xff0c;采用的算法好像是Mult…

face_recognition使用:人脸识别开源python库(face_recognition是基于dlib的深度学习人脸识别库)

face_recognition实现人脸识别的思路&#xff1a; &#xff11;.给定想要识别的人脸的图片并对其进行编码&#xff08;每个人只需要一张&#xff09;&#xff0c;并将这些不同的人脸编码构建成一个列表。编码其实就是将人脸图片映射成一个&#xff11;&#xff12;&#xff18;…

C/C++ 计算机视觉库/人脸识别开源软件

计算机视觉库 OpenCV OpenCV是Intel开源计算机视觉库。它由一系列 C 函数和少量 C 类构成&#xff0c;实现了图像处理和计算机视觉方面的很多通用算法。 OpenCV 拥有包括 300 多个C函数的跨平台的中、高层 API。它不依赖于其它的外部库——尽管也可以使用某些外部库。 OpenCV 对…

libfacedetection 人脸检测库的基本使用

目录 1、源码下载 2、编译 3、构建工程 4、个人总结 运行总结&#xff1a; 与CascadeClassifier级联分类器 人脸检测 对比: 1、源码下载 直接从github上克隆项目仓库。 git clone https://github.com/ShiqiYu/libfacedetection.git2、编译 这个项目使用了cmake脚本&#…

人脸检测库libfacedetection使用方法

libfacedetection介绍 libfacedetection是一个开源的人脸检测库&#xff0c;使用C编写&#xff0c;将模型文件转化为C的静态变量&#xff0c;不依赖外部第三方库&#xff0c;使用时可以直接把源代码拷到自己的工程&#xff0c;也可以使用动态库(so)/静态库(a)的方式来调用&…

人脸识别之一图像采集及人脸库的建立

完整人脸识别系统&#xff08;源码教程环境&#xff09;&#xff1a; 开源毕业设计&#xff1a;基于嵌入式ARM-Linux的应用OpenCV和QT实现的人脸识别系统(源码论文) 完全毕设教程&#xff1a;Linux上Opencv与Qt实现的人脸识别的考勤点名/门禁系统(PC与嵌入式ARM版本) 人脸识别…

C++实现人脸识别(百度云平台)

C实现人脸识别&#xff08;百度云平台&#xff09; 项目资源下载 项目思路&#xff1a;opencv 采集人脸照片&#xff0c;将照片发送至百度智能云平台&#xff0c;百度云平台与人脸库中的数据进行比较并返回结果。 一、项目环境 Ubuntu 64 20.0.4 opencv 4.2.0 二、环境配置…

人脸识别开源库

https://blog.csdn.net/qq_42156420/article/details/83445801 以往的人脸识别主要是包括人脸图像采集、人脸识别预处理、身份确认、身份查找等技术和系统。现在人脸识别已经慢慢延伸到了ADAS中的驾驶员检测、行人跟踪、甚至到了动态物体的跟踪。由此可以看出&#xff0c;人脸…

人脸识别——基于DLib库

目录 1.人脸识别的流程 2.ResNet-34算法概述 3.测试准备 4.测试代码 5.测试结果 1.人脸识别的流程 dlib库提供高精度人脸识别算法是基于深度学习网络ResNet-34实现&#xff0c;该网络基于三百万张照片进行训练&#xff0c;最终获得了人脸检测模型。 模型下载地址&#xff…