em rem

最新推荐文章于 2024-07-24 21:11:51 发布
最新推荐文章于 2024-07-24 21:11:51 发布
阅读量75 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53125457/article/details/111642938
版权

em

  • em是一个相对单位，它需要一个参考属性，参照的是当前元素的字体的大小
  • 参考值为：HTML根标签的font-size的值
    在这里插入图片描述

rem

  • rem相对单位，
  • 参考值为：HTML根标签的font-size的值
  • rem布局的原理：
    动态修改html根标签中的font-size值。
    实现方式：
    1.通过js
    2.通过vw。
    在这里插入图片描述
    在这里插入图片描述

vw/vh

  • 用百分比布局也有缺点，：
    1.计算百分数不方便。
    2.多层嵌套时使用不方便。

  • v w：1vw = 屏幕宽度的百分之一。
    v h: 1vh = 屏幕高度的百分之一。

  • 区别：
    百分比参照的是父盒子
    vw/vh 参照的是屏幕。
    在这里插入图片描述

┌;崛起`灬°
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS中px em rem区别与使用
09-27
本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧
px em rem
低眉的博客
09-23 145
px是固定单位 em相对于父元素 rem相对于html根元素 rem原理：rem的本质就是等比缩放，一般是基于宽度
html中px pt em rem区别介绍
Silas 蝈蝈 博客
02-27 6354
HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 px、em、pt之间的区别： 一、代表单位不同。 px代表的是像素单位，em代表的是相对单位，pt代表的是绝对单位。 二、单位长度不同 pt是72分之一英寸，px是数字化图像长度单位，em是字符宽度的倍数。 下面我们来看一下HTML中的长度单位px、em、pt。 pt (point，磅)：是一个物理长度单位，指的是7.
关于em rem px等单位之间的转换
Lioo121的博客
10-24 541
单位 绝对单位：尺寸固定不变的单位：px cm m 相对单位：大小由参考元素决定：一般都是相对父元素 百分比 相对父元素 em 需要先设置font-size 他的值为参考单位 默认 1em=16px 1em=font-size的值 如果有font-size 那么其他属性中的1em=font-size的值 ...
【pxemrem】
xxxxxxxr的博客
01-10 98
PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 1. em的值并不是固定的；
px em rem 这三中长度单位的区别
CC酱写前端的博客
02-18 294
px em rem 这三中长度单位的区别 1.px 是一个绝对单位;em 和 rem 是一个相对单位, em 参考的是当前元 素的字体(font-size)大小, 参考的是页面根元素 html 的字体，也就是(font-size)大小 2.rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素 原文链接：https://blog.csdn.net/yzkdcsdn/article/details/121054
CSS单位（px em rem）
ksx2333的博客
04-16 938
CSS单位（px em rem rpx upx）的介绍，以及em和rem的区别。
em rem 相对单位
A123ppleQueen的博客
06-27 318
绝对单位 px,就是说5px放在哪里都一样大。 1em=16px 但是em rem是相对单位，相对单位的值会根据外部因素发生变化。比如2em会根据它作用到的元素而变化。 因为网页响应式得特点，我们只能去学习css带来的抽象行 响应式 在css中指的是样式能根据浏览器窗口的大小有不同的响应 相对单位就是css用来解决这种抽象的工具。我们可以基于窗口大小来等比例的缩放字号，或者将网页山海关的任何元素都相对于基础字号来设置，然后只用更改一行代码就能缩放整个网页。 css长度单位 css支持几种绝对
66、px em rem rpx的区别
sunnnnh的博客
06-18 895
1、px em 和 rem的区别 包括像素px，百分比%，em，rem，vw/vh。 （1）像素（px）是页面布局的基础，是固定的像素，一旦设置了就无法因为适应页面大小而改变。一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素： CSS像素：为web开发者提供，在CSS中使用的一个抽象单位； 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。 （2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽
px em rem 的区别
weixin_56847152的博客
08-20 101
hello 大家好 我们又见面了 今天呢 我们来一下 px em rem 他们三个的区别吧 1.PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是大部分的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体...
css中px、em和rem的区别总结
09-24
相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
探索WebKit的画布世界：HTML5 ＜canvas＞ 元素的深度解析
2401_85743969的博客
07-24 1152
canvas>是一个HTML元素，用于通过脚本（通常是JavaScript）动态渲染图形。它提供了一个矩形区域，可以用于线条、曲线、文字和图像的绘制。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1384
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Hype 4 Pro for Mac：专业级HTML5动画制作利器
m0_72489515的博客
07-24 384
除了强大的动画制作功能，Hype 4 Pro还具备出色的交互设计能力。总之，Hype 4 Pro for Mac是一款功能强大、操作简便的HTML5动画制作软件，无论是专业设计师还是动画制作爱好者，都能从中获得出色的使用体验。该软件拥有直观易用的界面和强大的功能，支持多种设计元素，如滚动、旋转、缩放等，让设计师可以轻松实现复杂的动画效果。Hype 4 Pro for Mac是一款专为Mac用户设计的专业级HTML5动画制作软件，它集动画制作、交互设计于一身，为用户提供了一种全新的、高效的动画制作体验。
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
rpx px em rem % vh vw的区别
06-28
em是相对于父元素字体大小的单位，适用于网页开发中的字体大小设置。 rem是相对于根元素字体大小的单位，也适用于网页开发中的字体大小设置。 %是相对于父元素的百分比单位，适用于网页开发中的宽度、高度、边距等...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值