px em 和rem之间的区别
背景:
px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。
em:继承父级的。假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所以不建议用em。
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。
以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。
px em 和rem之间的区别的更多相关文章
- em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
- 彻底弄懂px,em和rem的区别
国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...
- css中单位px,em,rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用
1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度 ...
- 详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...
- px、em、pt之间的区别与互相转换
关于px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文(原网址已失效,这是其他站点) 这里引用的是Jor ...
- CSS中常用的字体单位:px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- px与与rem vw的区别
1.px 使用具体像素点为单位,好处是比较稳定和精确,但在浏览器放大缩小会出现问题 2.rem 参考根元素的值 例如设置根元素字体大小是20像素 在h1中设置字体大小 那么H1的大小就是40px p的 ...
随机推荐
- python 实现微信发送消息
背景:利用Python来登入你个人的手机微信,之后向朋友发送消息,发送的消息可以来源于网页.下面的例子就是取得当前日元的汇率,之后发送自己的某一个朋友的手机上 环境:Python3,JetBrains ...
- urlencode编码 — 为什么要编码
原文链接:https://blog.csdn.net/stpeace/article/details/82892571 参考:https://blog.csdn.net/z69183787/artic ...
- c++ 通过sizeof运算符看内存对齐
一.基础数据类型 基础数据类型的sizeof,包括char.short,int,long,float,double 注意:实际数值有所偏差,与系统相关 二.数组及字符串 包括字符数组.字符指针.字符串 ...
- CF13C Sequence(DP+离散化)
题目描述 给定一个序列,每次操作可以把某个数+1-1.要求把序列变成非降数列.求最少的修改次数. 输入输出样例 输入 #1 - 输出 #1 4 输入 #2 输出 #2 1 解题思路 这题是一道非常好题 ...
- 《学渣的电子技术自学笔记》——二极管的工作频率与PN结结面积的关系
<学渣的电子技术自学笔记>--二极管的工作频率与PN结结面积的关系 书本原文 :按结构分,二极管有点接触型.面接触型和平面型三类.点接触型二极管(一般为锗管)的PN结结面积很小(结电容小) ...
- Spring Cloud--实现Eureka的高可用(Eureka集群搭建)实例
将10086注册到10087上: 再在10086服务的基础上复制一个Eureka的服务,端口为10087,将其注册到10086上: application-name的名称保持一致,只是一个服务的两个实 ...
- NIO(2):Channel
Channel可以理解为铁轨,Buffer是铁轨上的火车.铁轨的两端连接这文件描述符或者说文件的缓冲区和程序运行时的内存.借助NIO是一种更加符合OS底层文件系统的调用方式,使用NIO可以用更小的开销 ...
- Fortify漏洞之 Log Forging(日志伪造)
继续对Fortify的漏洞进行总结,本篇主要针对 Log Forging(日志伪造)的漏洞进行总结,如下: 1.1.产生原因: 在以下情况下会发生 Log Forging 的漏洞: 1. 数据从一个不 ...
- 导航条按钮的设置UIBarButtonItem
1.目的 2.代码 // 设置导航栏的按钮 UIButton *leftNavBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 35 ...
- 通过标签名获得td和tr
<tr node="123445"> <td> <input type=button name="dak"> </td ...