CSS中的那些相对单位

原创已于 2024-03-28 11:04:50 修改 · 491 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-03-28 11:00:37 首次发布

本文介绍了CSS中的rem、vw、vh等单位，它们分别基于根元素字体大小、视口宽度和视口尺寸的百分比，是实现网页自适应设计的关键。

em：相对于自身字体大小。

rem：相对于根元素字体大小。

1rem = 根元素html的字体大小 = 16px

vw：设备视口宽度的百分比 v：viewport w：width

1vw = 视口宽度的百分之一

vmin：相对于视口宽度和高度的较小者。

vmax：相对于视口宽度和高度的较大者。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

老颖宁

关注关注

6
点赞
踩
11

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS单位完全指南

前端小巷子的博客

04-27

1446

在前端开发中，CSS 单位的选择直接影响着页面的布局效果和响应式表现。本文将系统介绍 CSS 中各种单位的特性、使用场景和最佳实践，帮助你做出更明智的选择。

CSS中的相对单位

ikun的博仔的博客

07-18

1273

解析CSS中的相对单位

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

2 条评论

优快云-Ada助手 2024.03.30
恭喜你开始了博客创作，文章标题“CSS中的那些相对单位”听起来很有趣！接下来，你可以考虑深入探讨每种相对单位的具体用法和适用场景，或者结合实际案例进行演示和分析，让读者更容易理解和应用这些知识。希望你能坚持不懈地写作，不断提升自己的技术水平和表达能力。加油！推荐【每天值得看】：https://bbs.youkuaiyun.com/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

_Eason_Zh 2024.03.29
这个讲的真好

html css相对单位

weixin_30411997的博客

06-12

260

p{ background:grey; color:white; font-size:0.5in; height:2em; width:50%; } height：2em意思就是屏幕上显示的的高度为字号的2倍 font-size:0.5in;就是html的字号设置为0.5英寸，是绝对值 width:50% 宽度为浏览器的0.5 css相对...

【深入理解CSS】相对单位

weixin_66749281的博客

07-23

461

在CSS中内可以声明一个变量，为它赋值，然后在样式表的其他地方引用这个值，可以减少重复和修改。root{#369;}p{color}同时，你也可以在后面加上另一个参数以提供备用值。root{#369;}p{color}动态改变自定义属性root{#fff;#000;1rem;padding1em;border0.5em;color0;0.8em;bold;}.dark{2em;padding1em;#999;...

CSS中的相对单位——长度和视口相对单位

Poggie的博客

01-20

1237

提示：如果知道字号的像素值，但是想用em声明，可以用一个简单的公式换算：用想要的像素大小除以父级（继承）的像素字号。对大多浏览器而言，默认字号大小为16px。准确地说，medium关键字的值是16px。当视口大小变化时，元素大小会逐渐过渡，而不是在某个断点突然改变。但是在视口越来越大或者越来越小之后，元素大小会出现极端情况，不能很好适应视口。calc()函数内可以对两个及其以上的值进行基本运算。在根节点用calc（）设置字号可以使得不用媒体查询就实现了大部分的响应式策略。

CSS—相对单位em

雷雨天的雷胖子

12-29

1057

目录一、概述二、详解三、注意事项一、概述 em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。 em可以设置width、height、line-height、margin、padding...

浅谈CSS中的尺寸单位

09-24

在本文中，我们将详细探讨各种尺寸单位，包括绝对单位和相对单位，以及一些特殊的运算单位和比例单位。 1. **绝对单位**： - **px (像素)**：像素是最常见的单位，它基于设备的物理分辨率，如显示器的像素密度。...

了解和使用CSS中的rem单位

01-08

CSS中的`rem`（root em）单位是一种相对长度单位，用于表示元素的尺寸相对于文档根元素（通常是`<html>`）的字体大小。这个单位在Web设计中被广泛使用，因为它提供了一种更加灵活和一致的方式来控制页面布局，特别是...

老生常谈CSS中的长度单位

01-21

本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识绝对长度单位绝对长度单位代表一个物理测量像素px(pixels) 在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，他们...

CSS单位

huyao的博客

04-16

522

CSS 中的单位有很多，这里主要介绍目前常用的及未来必备的几个单位。pxpx 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1p...

重学CSS之相对单位（一）

weixin_49172439的博客

06-16

515

响应式——在CSS中指的是样式能够根据浏览器窗口的大小有不同的“响应”。这要求有意地考虑任何尺寸的手机、平板设备，或者桌面屏幕。如果给一个元素设置800px的宽度，在小窗口下会是什么样？水平菜单如果无法在一行显示会是什么样？在写CSS的时候，我们既要考虑整体性，也要考虑差异性。当有很多方法解决同一个问题时，我们要选择能够兼顾更多情况的方法。相对单位就是CSS用来解决这种抽象的一种工具。我们可以基于窗口大小来等比例地缩放字号，而不是固定为14px，或者将网页上的任何元素的大小都相对于基础字号来设置，然后只用改

CSS 单位

qq_30436011的博客

09-02

1282

在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。

css中的单位

lap2004的专栏

02-12

616

最近阅读《深入解析css》，对css中的知识进行了总结，现将一些知识进行整理，便于应用。相对单位 em rem css中绝对单位为px。相对单位有em rem(root em) 1em相当于一个当前元素的字号。如果当前字体指定为16px,则em就是16px，在设置padding、height 等时，常用这些相对单位。 html文档中，根节点为所有元素组节点，他有个伪类选择器（：root）等于类型选择器html。rem为root em 简写是指相对于根节点的字号大小。作者在使用中，

【CSS】相对长度、绝对长度

qq_42347235的博客

05-26

2319

相对长度 em：字体的尺寸，比如当前字体大小为18px，则2em=36px ex：英文字母“x”的高度 ch：数字0的宽度 rem：root em 分两种情况，作用于非根元素时，其大小相对于根元素大小；作用于根元素时，其大小相对于初始大小 vw：view width 视窗宽度，1vw=1%视窗大小，100vw占满整个视窗 vh：view height 视窗高度，同上 vmin：vw和vh中较小的 vmax：vw和vh中较大的 %：相对于父元素的百分比绝对长度 cm：厘米 mm：毫米 in：inch

一文读懂 CSS 单位

lsq191690的博客

08-22

1760

说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就来学习一下 CSS 中单位！

CSS常见单位汇总

ITKidKid的博客

08-16

2745

CSS常见单位汇总

【CSS】相对长度单位绝对长度单位,vw/vh , rem等

freedomVenly的博客

01-29

3958

相对单位：（一般用于对屏幕分辨率兼容较高的项目，可以使用不同设备的大小）单位描述 em ems始终相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 ...

html 左右比例,CSS百分比padding都是相对宽度计算

weixin_39900023的博客

06-17

396

一、CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下，CSSmargin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top,bottom等属性的百分比值不一样。这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明，这里不展开。对于padding属性而言，任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器，举个...

CSS相对屏幕宽度,如何在CSS3中创建相对于屏幕宽度的真正响应式排版

weixin_36462640的博客

08-04

300

但是，这仍然没有得到广泛支持 . 我发现的最好的方法是将每个分辨率的字体调整应用于html选择器(下面的示例) . 您只在移动视图中声明基本字体大小，并使用“rem”值(相对于根选择器)逐步增强 .值得注意的是，IE 8，Opera Mini和iOS Safari 3.2并没有在简写"font"属性中支持它 . 所以这取决于您的浏览器支持需求 . 使用px值作为回退会破坏相对单位的目的，所以......

css中的相对单位