关于rem的理解

最新推荐文章于 2022-07-21 23:31:25 发布
最新推荐文章于 2022-07-21 23:31:25 发布
阅读量429 收藏
点赞数
分类专栏： CSS 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43394976/article/details/121185320
版权

rem是一个单位，类似于em，em是相对于父元素的字体大小而设定的单位。

而rem是相对于根标签html设定的单位，叫做root em。

比如若设置根元素html的字体大小为14px，非根元素的大小为2rem，则非根元素的字体大小为28px

吱昂张……
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem布局原理解析
12-14
rem是现在主流的移动端自适应布局方案，本文主要介绍了rem布局的原理和通用方案 原理 首先说一下，我们想要达到的自适应效果是什么。很简单：元素、字体大小能随着屏幕大小（一般相对于宽度来说）变化而变化，在大...
rem深度理解
ZiXiaweb的博客
11-10 717
什么是rem rem顾名思义就是root element，这个是一个相对的单位，与em的差别在于rem相对的是根节点html的font-size,em相对的是父元素font-size。使用rem其实是用媒体查询修来改html的font-size，那么使用rem的元素的大小也会相应的改变，所以我们只要写一份css就可以适配所有手机的屏幕了。虽然rem在某些浏览器下面不够精准，但那也只是极少数，如果需要非常精准的适配，那么可以使用js来计算html的font-size。 我们知道，在不同的手机设备，分辨率大
前端面试题-rem 原理
m0_46165310的博客
07-21 2236
前端面试题-rem原理
【HTML+CSS】移动端布局之rem布局
qq_30148319的博客
05-01 1747
学习视频及笔记来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、rem基础 1、概念 rem是一个相对单位，类似em。 rem与em区别：em是相对于父元素字体大小而言的；rem是相对于html元素的字体大小而言的。 rem的优势：度元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小（可以根据具体屏幕的大小来适配不同的字体大小）。 2、语法 /* 根html 为 12p
rem的认识和个人见解
smalCat的博客
04-16 967
看了很多rem的讲解和很多博客，这里我说说自己对rem的认识。    rem ： 作为css3新的属性单位，基于document.documentElement元素的fontSize基准值来确定其初始值,让处于                document内的所有元素基于document.documentElement设置的fontSize来做赋值                比em更直观，也...
媒体查询的应用说明
weixin_63029855的博客
03-13 3277
1. rem基础 rem单位. rem (root em)是一个相对单位,类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素( html )设置font size= 12px;非根元素设置width:2rem;则换成px表示就是24px。 2.媒体查询 2.1什么是媒体查询 媒体查询( Media Query )是CSS3新语法。 使用@media查询,可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不..
相对单位rem
10-30
相对单位的rem的理解与列子，这个一个静态页面，下载使用
3分钟读懂移动端rem使用方法(推荐)
01-19
1、为什么要用rem 博客很久没写了，原因很简单。 最近接手了一个项目，要同时做PC和移动端的页面，之前没接触过，但毕竟给钱的是大爷，所以还是硬着头皮上了。 移动端最麻烦的是什么？...简单理解： rem
移动 web 端屏幕适配(rem)
12-14
最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配（rem）这一块并没有真正理解，只是会用。 接下来，把自己的一些对移动 web 端屏幕适配（rem）的思考记录下来。 rem 介绍 rem 表示根元素（<...
基于rem的移动端响应式适配方案(详解)
01-19
最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。 关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name=viewport content=width=device-...
怎么通俗易懂理解rem布局
weixin_38958405的博客
06-02 1469
rem布局是现在比较流行的移动端布局，掌握了这种布局方式后，可以很轻易的实现布局自适应手机屏幕。目前淘宝首页就是采用的这种布局方式。 我曾经上网查过很多资料，看过很多解释原理的和使用方法的，可是还是一脸懵逼，可能我是一枚女程序员，脑子转不过来，必须要弄得很清楚透彻才能想明白这个布局的原理。后来我自己在纸上琢磨，用数学公式成功把自己弄明白了。希望也能帮到大家。就像一道数学题一样，见下题： 首先，...
谈谈对rem的理解和运用
weixin_42458616的博客
10-28 840
vue中怎么使用rem以及rem的理解一、先来说一下什么是rem1.下边来看个例子2.下边是自己总结的一段话希望可以加快理解3.那如果设计师给你的设计稿又会怎么去理解二、vue项目中怎么使用rem1.首先还是一样index.html加视口标签2.npm i amfe-flexible（里边有封装好的动态获取跟字号，根据页面大小，自动改变跟字号）3.npm i postcss-pxtorem(将px单位自动转化为rem)4.新建postcss.config.js文件（文件名不能变，目的是为了覆盖webpack
移动端rem单位用法
weixin_30535843的博客
01-28 194
1.rem（font size of the root element）是指相对于根元素的字体大小的单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二者都是相对单位2.我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法，例如：流式...
移动端rem布局的理解
鸣人的博客
05-20 1万+
rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。rem布局原理是，先按定高宽设计出来页面，然后转换为re
html中rem的理解&简单运用示例
Jacoh的专栏
11-21 2万+
作为一名前端开发工程师，很有必要梳理并记录下自己成长过程中的问题，以温故知新。 尽量做到： 把前端开发成长中遇到的概念，原子性的拆分开，单独的去理解学习； 不添加太多个人情感化语言，以知识为中心； 会运用，不等于理解，文章侧重于理解； ？rem是什么 rem是css中的单位。 类同举例: height: 1px 表示height的值为1个css像素； vertial-align: 50...
rem：个人理解的rem的概念和使用
weixin_33712881的博客
03-26 517
最近面试问道rem的问题，按照原来的工作经验解答，然后回来从网上搜索了一些关于rem的解释和原理，发现跟本都不是自己想找的那种，就根据自己的理解写了这一边文章，以此记录一下，方便自己查找。如有大神觉得我的理解不对，请您指出，万分感谢。 现在开始说说我自己对rem的理解，其实说白了rem也就是在html里面设置一个根字体，然后在用js动态获...
rem详解极其用法
yangchu199608的博客
01-12 6248
1.什么是rem?rem（font size of the root element）是指相对于根元素的字体大小的单位。 2.为什么要用rem(rem有什么优点)？都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、
rem移动端之rem布局基础理解与运用
Pink_chen的博客
10-24 4470
首先简单介绍一下rem布局的基础了解 rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小； 本篇文章中涉及三点 1. 媒体查询@media 2. less预编译处理器的详解 3. rem单位的详解 1.媒体查询语法与运用介绍 1.1：媒体查询可以响应屏幕的变化，根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示。 1.2：语法如下 @media mediatype ...
3分钟读懂移动端rem使用方法
热门推荐
qq20004604的博客
03-27 3万+
3分钟读懂移动端rem使用方法
谈谈你对rem、em的理解
最新发布
05-30
rem和em都是CSS中的长度单位，用于设置元素的尺寸。不同之处在于，em是相对于其父元素的字体大小来计算的，而rem则相对于根元素的字体大小。因此，rem更加稳定，能够避免嵌套多层元素时字体大小的叠加效应。使用rem可以让网页元素的尺寸更加统一和一致，有利于响应式设计和移动端适配。而em的使用则更加灵活，可以根据父元素的字体大小来进行相对调整，适合一些特定的布局需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值