手机端rem单位的使用

最新推荐文章于 2022-10-24 11:39:47 发布
最新推荐文章于 2022-10-24 11:39:47 发布
阅读量170 收藏
点赞数
分类专栏： 手机端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44151357/article/details/98630708
版权

为什么要用rem单位

px: 使用“px”来设置我们的文本的优点是比较精确和固定，但种方法存在一个问题：无法随着浏览器进行缩放
em: em是相对单位，但是em是相对于父元素的大小来计算的，所以层级越深，换算会月复杂，计算公式：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
rem: rem是相对于页面根元素<html>，计算简单，给html的font-size设置为100px能方便计算字体和宽高的rem值，比如0.14rem = 14px, 0.36rem = 36px
计算公式：html的font-size * rem = px

森娟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端常用单位——rem
09-16 679
移动端常用单位： ①px：像素大小，固定值 ②%：百分比 ③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位） ④rem（移动端主流）：相对根节点(html)的font大小 ⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一 ⑥vh（视口高度）：相对视口高度比例，1vh相当于...
手机端适配 rem单位
chose_DoIt的博客
07-03 182
//使用rem var clientWidth = document.documentElement.clientWidth; if(clientWidth>=640){ document.documentElement.style.fontSize = '100px'; }else{ document.documentElement.style.fontSize...
移动端的rem单位
qq_48445738的博客
10-07 204
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。 为什么web app要使用rem？ 这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能
手机网页字体大小单位用em
php菜鸟技术天地
11-14 4285
手机网页字体大小单位用em
利用伪元素设置元素是否选中状态
przlovecsdn的博客
08-16 865
li::before { content: ''; position: absolute; top: 50%; left: 0; width: .36rem; height: .36rem; margin-top: -.18rem; border-radius: .36rem; border: .01rem solid ...
手机端页面rem宽度自适应脚本
12-10
这样一套代码就搞定手机端尺寸自适应，不需要媒体查询，而且利用Sass和Less能够给我们节约更多的时间，以及更好的体验。 扩展 因为是要计算rem的值，所以我们前端在看到设计图量尺寸的时候会去计算下这个东西
手机端用rem+scss做适配的详解
11-21
rem介绍 rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。 假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 ... font-size: 10px;...单位使用px和百分比。在宽度
rem.zip_REM_painbt3_rem单位换算_whisperedzvw
09-24
手机端使用rem为单位进行单位换算，根据屏幕大小改变根元素字体大小,匹配不同设备
H5手机端开发制作之新单位rem说明文档
06-03
H5手机端开发制作之新单位rem说明文档,rem布局在移动端还是很有用的
了解真实的REM手机屏幕适配
08-10
rem 作为一个低调的长度单位，由于手机端网页的兴起，在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过等比缩放的方式达到设计图要求的效果。
rem与px换算
weixin_40365953的博客
09-19 3681
html标签的font-size=69px（根据rem自适应算法得到的） UI给的字体大小为14px 我想得到这14px等于多少rem 14px÷69px得到0.2rem 所以rem与px换算是根据html标签的font-size进行比率换算的...
22-移动端布局方式-rem
保持好奇
10-24 1259
原理：需要媒体查询去设置常见的终端下面的font-size的值，rem单位会自动相对于根元素计算写法：html {html {html {html {计算物理像素 / dpr = 逻辑像素Q（单位是px）Q/相对应的font-size的值即可。
关于如何计算rem
xfy196的博客
06-25 7873
关于如何计算rem rem是指根元素(root element html) 的字体大小 ，根元素默认的字体大小为16px。 rem是通过根元素进行适配的，网页中的根元素是html我们通过设置html的字体大小就可以控制rem的大小； 所以默认我们认为1rem=16px； 2rem=32px。 如果为了方便计算我们一般设置1rem=100px，我们需要设置字体大小为100px 所以我们一般在js中做判断；： <script> (function(){ let a = d
为什么要用rem
weixin_30501857的博客
05-16 179
为什么要用rem 参考文章web app变革之rem 公司使用的375*667（也就是iPhone6）作为缩放比例标准，设计师是按照750px的标准出图 为了保证在不同的屏幕下显示效果基本等同，为此规定了缩放比例 document.documentElement.clientWidth / 25 = 15 这里的根字体大小可以按照喜好自定义 因此在计算rem值时,需要按照设计师给定的px值除以5...
rem自适应布局用法及详解
热门推荐
前端~锋小张
04-26 1万+
对于很多新同学来说，rem还是比较熟悉而又陌生的， 熟悉呢是因为rem时常出现在耳边，陌生呢是因为又搞不清原理。今天咱们一起来弄清楚rem到底是怎么一回事！原理：css3规定：1rem的大小就是根元素&lt;html&gt;的font-size的值。通过设置 根元素&lt;html&gt;的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， ...
rem单位中html默认字号,字体大小之px、em、rem、pt,字号详解及换算表
weixin_28909779的博客
06-03 4831
以前经常用PX来设置CSS里面的字号，但是随着时代发展慢慢都用rem进行代替，本文主要用来介绍字体大小px、em、rem、pt的介绍。PXpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Wind...
【干货】前端rem单位的正确使用姿势
weixin_34014555的博客
05-05 446
2019独角兽企业重金招聘Python工程师标准>>> ...
rem动态布局的原理及对设计稿的计算比例
一心向学
01-14 2085
1，rem的原理 rem：是css的一个相对单位 相对于html根元素， 可以通过监测屏幕大小改变html的字体大小从而实现自适应大小的效果，相对于根元素(即 html 元素)font-size 计算值的倍数。 先按定高宽设计出来页面，然后转换为rem单位，实现完美自适应。例： a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5 = 50px。 关于像素的理解：“花森酱” 的博客 2，什么是动态布局 就是移动端项目适配不同的屏幕的大小，因为市场上手机有很多，屏幕大小也不同。
rem怎么计算
weixin_30512043的博客
01-14 506
px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的 em：相对单位，继承父节点（层层继承，传递）基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小,可理解为”root em”, 相对根节点html...
使用rem进行手机端适配
最新发布
05-24
使用rem进行手机端适配的基本思想是，将页面中的所有尺寸都转换为相对于根元素(html元素)的相对大小，然后通过设置根元素的字体大小来控制整个页面的缩放比例。 具体实现步骤如下： 1. 设置根元素的字体大小，一般...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值