html5中px,em,rem区别

最新推荐文章于 2024-09-04 01:57:45 发布
最新推荐文章于 2024-09-04 01:57:45 发布
阅读量2.9k 收藏 1
点赞数
  PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体

一，Em为单位

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. body{ font-size:62.5%;}  /*10/16*100%*/  
  2. .font1{ font-size:1.2em;}  
  3. .font2{ font-size:12px;}  

二，Rem为单位
CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>

代码实例：

[css] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. html{font-size:62.5% ;}  
  2. .fon1{ font-size:1.2rem;}  
  3. .fon2{ font-size:12px;}  
参考下图：



但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果


柠静檬
关注
html5px2remHTML5页面布局单位由px转换rem解决方案
08-11
html5-px2rem - HTML5页面布局单位由px转换rem解决方案
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
HTML5----字体rem,px,em,设置
热门推荐
Damys
05-26 2万+
PX为单位 在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体
什么是rem单位和em单位？它们有什么区别？
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-04 1237
基本概念rem单位em单位区别示例一：使用rem单位代码解析示例二：使用em单位代码解析实际开发中的技巧在CSS中，长度单位的选择对于确定网页元素的大小至关重要。本文将探讨两种常用的相对长度单位——rem和em，解释它们之间的区别以及何时使用它们。通过具体的代码示例和实际应用场景，帮助读者更好地理解和应用这两种单位。
rem与px的转换
simple_tifa
04-03 1073
rem是相对于根元素&lt;html&gt;，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系： | px | rem | ------------------------ | 12 | 12/16 = .75 | | 14 | ...
H5页面字体大小使用rem （重置字体大小）setFontSize.js
weixin_30341745的博客
11-23 292
/*by min*/ //初始化rem (function(){ var getStyle = (function(){ if(window.currentStyle){ return function(obj, name){ return obj.currentStyle[name]; ...
px和rem的区别是什么
qq_45814648的博客
01-12 628
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%;px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度。
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
css中px、em和rem的区别总结
09-24
相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
html中px pt em rem区别介绍
Silas 蝈蝈 博客
02-27 6536
HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 px、em、pt之间的区别： 一、代表单位不同。 px代表的是像素单位，em代表的是相对单位，pt代表的是绝对单位。 二、单位长度不同 pt是72分之一英寸，px是数字化图像长度单位，em是字符宽度的倍数。 下面我们来看一下HTML中的长度单位px、em、pt。 pt (point，磅)：是一个物理长度单位，指的是7.
html5中px和em的区别,聊聊 px em rem 在WEB前端开发中的区别
weixin_36487018的博客
06-18 250
我们都知道基于像素的字体大小所用的单位是px，但是随着响应式设计的不断火热，基于相对字体大小的单位em、rem便开始流行起来。为什么我们需要使用相对字体大小呢？或 许我们最能直接想到的一点就是它关于CSS3的一些东西。很好理解的是它是一种字号计算方式，尤其是当你在为多种分辨率进行字号计算的时候。想想要在手机 上实现字体变大或者变小的时候，你不得不要反复重新计算对象的字体大小，这是相当耗时间的。这个...
字体单位rem
hugejihu9的专栏
10-22 474
文章来自：源码在线https://www.shengli.me/css/89.html css3隆重推出新的字体单位就是rem。所以必须要与时俱进。跟上潮流才对。那么rem到底是怎么 计算的呢？   1、确定基数：一般10px，自己记住就行，不用写进代码里 2、html {font-size:百分数;}    公式：百分数=基数/16   　　基数10    百分数62.5% 　　基数...
html5中px和em的区别,CSS中字体尺寸px pt em rem等的区别
weixin_35225189的博客
06-29 223
常用单位下面是对这些单位的一个简单整理:单位类型描述pxAbsolute1个Viewport像素ptAbsolute1pt = 1/72英寸pcAbsolute1pc = 12pt%Relative相对于父元素的字体尺寸emRelative相对于父元素的字体尺寸remRelative(即root em) 相对于html标签的字体尺寸keywordRelativexx-small, x-small,...
px和rem的区别？rem如何做适配?
qq_59068526的博客
10-12 467
px和rem的区别？rem如何做适配?
px、em 和 rem 三者区别
cbkting的博客
02-18 9435
px、em 和 rem 三者有什么区别? PX px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是有大部分的国...
响应式网页：使用 rem 设置文字大小
axl---专心专注于web前端开发
08-07 541
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。 当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。 网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。 一、那...
HTML中的长度单位px、em、rem
qq_43654065的博客
09-03 4266
搭建前端页面时，较为常用的长度单位就是px、em、rem。 px：固定单位。设置单位为px后，盒子的长度、宽度都确定了，不会因为页面的大小改变而改变，即不会适应屏幕大小。 em：相对于父级
html中rem单位的转换,CSS3 中的 rem 值与 px 之间的换算
weixin_39519554的博客
06-09 266
想给博客换个主题，到处找找不到满意的，最后发现默认主题 twentytwelve 越看越顺眼，于是就想动手改一下用。看 CSS 文件的时候发现引入了一个新大小单位：rem，虽然 CSS 文件注释里有介绍，但看半天拿着手机上的计算器计算了几下愣是没搞明白，怕是新东西搜出来的都是英文看着累就没找 google，而是百度了一下，百度的结果就是看到一篇文章被转来转去，来转去，转去，去。。。郁闷之下回到主题...
H5 - rem自适应方案
_
12-01 1874
H5 - rem自适应方案 对于H5应用来说，为了更通用地满足各机型屏幕的自适应布局要求，我们目前采用rem布局方案。 rem rem是相对于根元素(html)字体大小的单位，它只是一种相对单位。不同于另一个相对单位em，em是相对于父元素的字体大小，而rem则相对于根元素(html)，与父元素的字体大小无关。 等比例适配所有屏幕 不论传统的px绝对像素布局，还是流式布局、固定宽度和响应式做法，都有其缺陷，并不能完全做到自适应所有屏幕。 但是，rem方案可以比较容易地做到等比例适配...
rpx px em rem % vh vw的区别
06-28
### 回答1： rpx是小程序中的单位，可以根据屏幕宽度进行自适应缩放，适用于小程序开发。 px是像素单位，是网页开发中最常用的单位，不具有自适应性。 em是相对于父元素字体大小的单位，适用于网页开发中的字体大小设置。 rem是相对于根元素字体大小的单位，也适用于网页开发中的字体大小设置。 %是相对于父元素的百分比单位，适用于网页开发中的宽度、高度、边距等设置。 vh和vw是相对于视口高度和宽度的单位，适用于网页开发中的响应式布局。 ### 回答2： 1. rpx：rpx 是小程序中自带的一种单位，是可以根据屏幕宽度自适应的单位，即在不同设备上展示的物理尺寸相同。rpx 的设计理念是为了满足不同屏幕分辨率下 UI 图片等素材大小的自适应，它根据设备宽度进行换算，当屏幕宽度为 750 时，1rpx 就等于 1px，当屏幕宽度小于或大于 750 时，1rpx 的值也会相应缩放或放大。在开发小程序时，如果需要让视觉稿能够自动调整到不同设备上，使用 rpx 单位是非常方便的。 2. px：px 单位是 web 开发中最常用的单位，它是一个绝对的单位，不会因为屏幕大小而变化，是一个固定的值。 3. em：em 是相对单位，它是根据自身字体大小的倍数来确定元素的大小。因为 em 的值是基于父元素的字体大小计算的，所以通常用于设置文本的字体大小。比如一个元素的 font-size 为 16px，设定它的子元素 font-size: 0.5em，则子元素字体大小为 8px。 4. rem：rem 是相对单位，它是根据根元素的字体大小来确定元素的大小，即根元素的 font-size 所对应的值。相比 em，它更为灵活，因为根元素的字体大小可以通过 JavaScript 动态改变，因此 rem 也可以方便地实现响应式布局。 5. %：百分比也是相对单位，它是相对于包含块的大小进行计算。如果一个元素的宽度为 50%，则它的宽度大小会自动调整为包含块的一半。 6. vh 和 vw：vh 和 vw 是视口尺寸的相对单位，vh 表示视口高度的百分比，vw 表示视口宽度的百分比。如果一个元素的宽度设置为 50vw，则它的宽度将自动调整为视口宽度的一半。使用 vh 和 vw 可以方便地实现基于视口适应的响应式布局。 ### 回答3： rpx、px、em、rem、%、vw、vh 都是网页开发中经常使用的单位。在网页开发中，我们经常需要根据屏幕大小和分辨率来设置文本、元素的大小和位置。这些单位的不同使用场景也不同，下面我将详细介绍各个单位的区别。 1. rpx rpx是小程序独有的单位，原意为responsive pixels，中文翻译为响应式像素。在小程序中，rpx被设计为可根据屏幕宽度自适应的单位，1rpx等于屏幕宽度的1/750。因此，rpx的使用场景主要是小程序中一些比较小的元素，如边框线、小图标等的大小或距离的设置。 2. px px是像素的意思。在Web开发中，px通常指屏幕上的一个像素点，即一个设备像素（Device Pixel）。使用px设置元素大小与距离时，元素的大小和距离不受页面缩放影响，不具备响应式设计特性。一般在设置一些固定大小元素的时候就会使用px单位。 3. em em单位是相对单位，指相对于当前元素的字体大小。例如，一个元素的字体大小为10px，那么设置它的margin为2em，表示为20px。em单位在设置字体大小时尤其有用，因为可以实现文本的相对大小调整。 4. rem rem单位也是相对单位，但是是相对于根元素的字体大小。例如，如果根元素html的字体大小为16px，那么1rem等于16px。使用rem可以实现相对大小的控制，而且可以随着页面大小的变化而变化，非常方便。 5. % 百分比单位是相对于父元素的大小。例如，如果一个元素的宽度设置为50%，则其宽度为其父元素宽度的50%。%单位在设置图片大小时比较常用，可以保证图片大小与容器大小的比例不变。 6. vw和vh单位 这两个单位是针对视窗大小的相对单位。vw代表视窗宽度的百分比，vh代表视窗高度的百分比。例如，一个元素的宽度设置为50vw，表示其宽度为视窗宽度的50%。这些单位在移动端的响应式开发中用得比较多。 综上所述，各个单位的使用场景是不同的。在实际开发中，需要根据不同的情况选用不同的单位来设置元素的大小或位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值