html里面font-size与rem结合实现等比缩放

最新推荐文章于 2024-08-19 13:40:43 发布
最新推荐文章于 2024-08-19 13:40:43 发布
阅读量1.7k 收藏 3
点赞数 2
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43505774/article/details/114176273
版权

在这里插入图片描述

设置html{font-size：20px}
里面包含的标签设置 rem
1rem就等于 html 的font-size = 20px
所以实现动态的比例缩放
可以根据window.onresize 来监听可见视图的变化 来 改变html
document.documentElement.fontSize = document.documentElement.clientwidth / (所需变化元素宽度/font-size：20px)

坚持学习前端日记
关注
专栏目录
js实现rem自动匹配计算font-size的示例
01-19
为了解决这类问题，我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。 下面是相关JavaScript的实现代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = '...
自动调节html的font-size配合rem实现等比例缩放
FAFA的博客
10-22 4219
<script type="text/javascript"> var __rootrem; (function () { var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function setFont() { va...
前端开发入门到实战：通过 rem 和 vw 实现页面等比例缩放自适应
软件开发-前端开发-IT
07-29 1432
一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。 浏览器支持：Caniuse 示例 若根元素 font-size 为 12px html { font-size: 12px; } h1 { font-size: 2rem; /* 2 × 12px = 24px */ } p { ...
前端开发中的大屏布局方案：使用 rem 单位与动态设置 html 的 font-size
最新发布
前端开发工程师
08-19 2721
在前端开发中，实现响应式布局是非常重要的，尤其是在大屏幕设备上。本文将介绍一种使用 rem 单位和动态设置 html 元素的 font-size 的方法，来实现大屏布局的解决方案。
动态改变html(根元素)的属性值font-size(移动端rem)
文杰的博客
01-30 2181
以屏幕宽度为计算单位，将屏幕分成固定的份数，如768(通常)、750(uni-app),将其设置为根元素的font-size。移动端 rem
font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配
一个小白的成长历程
03-31 1989
面对不同设备的适配与响应；这里介绍不同的是@media规则进行匹配不同的设备； 不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单位 - rem； *其中“r“代表的是root的意思，在HTML网页中，root指的就是<html>元素
Vue3页面如何设置rem单位的依据“根font-size”的两种方式
STATICHIT静砸的博客
12-13 3391
最近在对项目做整体的自适应。我们可以通过设置meta的viewport属性设置屏幕的缩放，但有时候，屏幕缩放了但字体大小也需要做相应的调整才能达到更好的自适应效果。我们很容易想到使用媒体查询+rem来实现字体的自适应。rem单位：“rem” 是 “root em” 的缩写，表示相对于根元素（html元素）的字体大小。如果根元素的字体大小为16px，1rem就相当于16px。如果根元素字体大小更改，那么所有使用rem单位的元素的大小都会相应地调整。首先，简单说说使用'rem'单位的目的和必要性。
关于css的font-size的单位rem、em、px的区别
weixin_41445581的博客
05-07 2615
px：相对长度，相对于显示屏分辨率而言 em值不固定，会继承父级元素的字体大小 你好 这里的1em就是父元素的大小为20px，所以2em就是40px **rem**这个是相对于根节点html大小而定，如果根元素的字体大小为16px，那么1rem=16px，该单位只需改变根元素的值的大小就可以改变页面所有以rem为单位的值的大小 ...
px/em/rem有什么区别，为什么通常给font-size设置为62.5%
subsistent的博客
03-27 442
1. 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。1. 因为绝大多数浏览器的默认字体大小为 16px ，而将font-size设置为 62.5% 则等价于字体大小的font-size:10px;2. 随之在其他的换算单位，如 rem 的字体换算时，则可以表示为 1rem = 10px， 整数值对于单位的换算会比较方便。2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
前端知识——css 之移动端适配方案vw、rem详解
weixin_42771853的博客
04-04 6779
px是pixel单词的缩写，翻译为像素。像素是影响显示的基本单位。像素单位常见的有三种像素名称：设备像素（也称之为物理像素）；设备独立像素（也称之为逻辑像素）；CSS像素设备像素，也叫物理像素。设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小比如iPhone X的分辨率 1125x2436，指的就是设备像素设备独立像素，也叫逻辑像素。
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。... font - size : 2rem; line-height : 1.2
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
CSS中的font-size属性使用教程
12-13
`%`单位是相对于父元素的`font-size`，`em`单位则与当前元素的`font-size`有关，而`rem`单位（root em）是基于根元素（通常是`html`元素）的`font-size`。 #### `em`单位 `em`单位使得文本的大小可以根据其父元素的...
移动WEB开发之rem适配布局
qq_46199553的博客
09-10 646
方案 ？ 页面布局文字能否随着屏幕大小变化而变化？ 流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？ 1. rem 基础 rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 rem的优势：父元素文字大小可能不一致， 但是整个
rem的适配
weixin_47012279的博客
12-07 1227
rem是相对长度单位，相对于html元素(根元素)font-size计算值的倍数的css单位。简单理解：1rem = html的font-size值（px）eg: html{ font-size:10px; } div{ font-size:1rem;//实际 1*10px=10px } 2、适配原理 js设置 html标签的font-size = 移动设备宽度/设计稿宽度 * 100 + "px"具体：移动设备宽度/设计稿宽度 是渲染效果相对于设计稿的缩放比 ==》
响应式网页：使用 rem 设置文字大小
axl---专心专注于web前端开发
08-07 534
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。 当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。 网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。 一、那...
如何更愉快地使用rem —— 别说你懂CSS相对单位
weixin_33756418的博客
07-16 201
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若有勘误或翻译建议，欢迎 Github PR ^_^） 《别说你懂CSS相对单位》系列译文： 如何更...
移动端适配方案总结之rem
qq_42931285的博客
04-05 721
移动端适配方案总结之rem
理解 css rem与动态计算rem
qq_36668399的博客
07-19 1984
理解 css rem与动态计算rem
vw与rem结合的自适应等比缩放布局策略
vw单位允许元素大小与视口宽度成正比，但不支持设置最大最小宽度，而rem配合JavaScript动态设置HTML的font-size，可能在某些安卓设备上出现问题。 因此，提出的解决方案是将两者结合起来：使用vw确保布局比例正确，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值