rem单位布局学习布局笔记；

最新推荐文章于 2024-12-08 12:23:30 发布

原创最新推荐文章于 2024-12-08 12:23:30 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html

HTML 同时被 3 个专栏收录

32 篇文章

订阅专栏

CSS

26 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

本文介绍了rem单位的基本概念，如何基于HTML根元素的字体大小进行调整，以及它在前端开发中的优势。通过实例演示了em与rem的区别，并展示了如何利用rem实现页面尺寸的全局控制。

rem单位
rem(root em)是一个相对单位，类似于em, em是父元素字体大小。
不同的是rem 的基准是相对于HTML元素的字体大小

如：根元素（HTML）设置font-size=14px，非根元素设置宽度 width:3rem和高度height:3rem；换成px (像素)表示就是 42px。宽和高3rem等于像素42px。

1、em单位是相对于父元素的组团大小来说的，如下

<html>
<head>
  <title>rem</title>
</head>
<style type="text/css">
  .divBox{
    font-size:12px;
  }
  p{
    width:10rem;
    height:10rem;
    border:1px solid red;
  }
</style>
  <body>
    <div class="divBox">
        <p>
          rem
        </p>
    </div>
  </body>
</html>

2、rem 相对于 Html元素字体大小来说

html{
   font-size:14px;
}
p{
  width:20rem;
  height:20rem;
  
}`

3、rem优点就是可以通过修改html根节点文字大小来改变页面中元素的大小，可以整体可控制

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心灵的制造商

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS的REM单位详解

PixelInk的博客

10-01

908

REM单位是CSS中的相对单位，它相对于根元素的字体大小进行度量。通过设置根元素的字体大小，可以使用REM单位来定义其他元素的尺寸。在上述代码中，body元素的字体大小被设置为1rem，它将等于根元素的字体大小（即16像素）。同样，h1元素的字体大小为2rem，它将等于根元素字体大小的两倍（即32像素）。REM单位的大小取决于根元素的字体大小。相比其他单位（如像素、百分比等），REM单位的值是相对于根元素字体大小的倍数。通过使用REM单位，可以根据根元素的字体大小自动调整其他元素的尺寸，以实现响应式设计。

移动开发-响应式布局-rem单位 flexible 方案

爱睡的虫虫

05-14

1036

什么是响应式布局响应布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

参与评论您还未登录，请先登录后发表或查看评论

rem 布局

weixin_58526727的博客

06-20

3060

rem布局 rem单位 rem(root em)是一个相对单位，基准是相对html元素字体大小，类似em(父元素字体大小) 比如，根元素(html)设置font-size=12px，非根元素设置width：2rem；，转换成px就是24px。 rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。媒体查询媒体查询（Media Query）是CSS3新语法。使用@media 查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不

rem单位 -- 响应式布局

zjsfdx的博客

05-23

612

<!DOCTYPE html>  <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8">

rem 单位实现页面自适应布局

weixin_33890526的博客

09-25

240

A. 先看一个函数： /* * 设置根元素字体大小 * @param Number minSW 最小缩放的设备屏幕宽度 * @param Number maxSW 最大缩放的设备屏幕宽度 * @param Number minFS 最小的宽度对应的字体大小 * @param Number maxFS 最大宽度对应的字体大小 ...

移动WEB开发之rem适配布局与响应式布局学习笔记

Lostdeer的博客

12-23

857

移动WEB开发之rem适配布局与响应式布局学习笔记1 rem适配布局1.1 rem 基础1.2 媒体查询1.2.1 什么是媒体查询1.2.2 语法规范1.3 Less 基础1.3.1 维护 css 的弊端1.3.2 Less 介绍1.3.3 Less 变量1.3.4 Less 编译1.3.5 Less 嵌套1.3.6 Less 运算1.4 rem 实际开发适配方案11.5 rem 实际开发适配方案22 响应式布局2.1 响应式开发原理2.2 响应式布局容器2.3 Bootstrap前端开发框架2.3.1 B

vue3 学习笔记09 -- 自适应实现(postcss-pxtorem)

weixin_46328739的博客

07-15

859

postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位，从而实现响应式布局。主要用途是在移动端开发中，通过设置根元素的字体大小，使得页面元素的尺寸随着根元素字体大小的变化而变化，从而实现不同屏幕尺寸下的自适应布局。

前端常用基础以及布局方式学习笔记

WJ的博客

11-07

369

前端常用基础以及布局方式学习笔记 HTML常用标签标题标签：<h1></h1>~<h6></h6> 段落标签：<p></p> 换行标签：<br/> 水平线：<hr/> 文字斜体：<i></i> 加粗：<b></b> <strong></strong> 下标：<sub></sub&

[学习笔记]从Flexbox到Grid布局的实战指南

最新发布

wahzx的博客

12-08

1246

通过Flexbox和Grid，现代CSS提供了强大的工具来实现复杂而灵活的网页布局。Flexbox适用于一维排列，而Grid则在二维布局中完美胜任。理解每种布局的核心概念和属性，并结合实际需求选择合适的工具，将使您的网页设计更加高效、美观和维护简便。

javascript用rem来做响应式开发

10-18

rem单位相对于em单位的优势在于，它是相对于根元素计算的，而不是相对于当前元素的font-size，这使得布局计算更加简单、统一。在响应式开发中，使用百分比（%）来定义元素的宽度、高度、内边距（padding）、外边距...

rem单位

weixin_43294560的博客

01-15

7595

rem单位 rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小 rem:html字体大小的多少倍用法: 设置rem大小: document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px'; 750px是当前流行美工稿...

rem详解及使用方法

weixin_34232744的博客

03-14

573

好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法首先，先说一个常识，浏览器的默认字体高都是16px。步入正题-----〉兼容性：目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。使用%单位方便使用 ...

rem 和 px 的关系

solocao的专栏

07-21

2707

rem 单位使得布局和字体大小更加灵活和响应式，因为它相对于根元素的字体大小。如果想要在不同设备上保持一致的比例，使用 rem 是比 px 更好的选择。同时，使用 rem 还可以通过调整根元素的字体大小（例如通过媒体查询或用户设置）来更改整个布局，而不需要单独修改每个元素的样式。

rem、em、px换算

非为000的博客

07-22

2161

注意点： - html {font-size:62.5%;} - body {font-size:14px;}

网页的缩放，适配以及移动的适配！

09-10

732

来源：https://blog.youkuaiyun.com/wuyufa1994/article/details/85143693 从布局出发：宽度自适应，常用百分比的方式。由于父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素由于采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被flex或者box这样的伸缩...

px和em和rem

jason_xsj的博客

08-16

264

PX:px是Pixel的缩写，像素，是固定的单位；用了这个px,在ie浏览器中不能改变文字大小； em:相对长度单位，相对的是自己父级； rem:想对长度单位，相对的是根元素，html；因为在浏览器中的默认字体大小都是16px;所以1em=1rem=16px,10px=0.625em=0.625rem.

rem单位中html默认字号,字体大小之px、em、rem、pt,字号详解及换算表

weixin_28909779的博客

06-03

5456

以前经常用PX来设置CSS里面的字号，但是随着时代发展慢慢都用rem进行代替，本文主要用来介绍字体大小px、em、rem、pt的介绍。PXpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Wind...

移动适配与响应式布局的Web开发学习笔记

根据提供的文件信息，以下是对web学习笔记的知识点详细说明： 1. 移动适配：rem 移动适配是响应式网页设计中一个重要的环节，特别是在多种屏幕尺寸的移动设备日益普及的今天。rem（Root EM）是一种相对单位，它是相...

rem单位 布局学习布局笔记；

rem单位布局学习布局笔记；