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,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。
rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。
以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。
px,em,rem的更多相关文章
- 深度讲解VIEWPORT和PX是什么?移动端单位px,em,rem
刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...
- css中px,em和rem的区别
css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...
- Css单位px,rem,em,vw,vh的区别
px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- CSS中px,em,rem,pt的区别及四者换算?
本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...
- 比较css中单位px,em和rem的区别
国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...
- 笔记:字体大小的几种不同的格式px,em,rem
px px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 譬如,Windows的用户所使用的分辨率一般是96像素/英寸. 而MAC的用户所使用的分辨 ...
- CSS 中的rem,em,vh,vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- 关于px、em和rem的学习笔记!
刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...
- (转)px、em、rem的区别和使用
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...
随机推荐
- 【nodejs笔记2】认识express框架
app.js:启动文件,或者说入口文件package.json:存储着工程的信息及模块依赖,当在 dependencies 中添加依赖的模块时,运行 npm install,npm 会检查当前目录下的 ...
- [译]Godot系列教程一 - 场景与节点
场景(Scene)与节点(Node) 简介 先设想有那么一瞬间你自己不再是一名游戏开发者了,而是一名大厨! 你的装备换成了一套大厨的制服.不要考虑制作游戏的事情,你现在的职责是为你的顾客创建新的可口的 ...
- No.006:ZigZag Conversion
问题: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...
- c语言 sizeof理解
1.基本数据类型 char :1 short:2 int 4 long 4 long long :8 float:4 double :8字节. 2.数组:对应的基本数 ...
- iOS 开发技术牛人博客
dark_gmn 的博客 http://blog.csdn.net/dark_gmn?viewmode=contents Tel_小超 的博客 http://blog.csdn.net/qq_2 ...
- VBoxManage命令
查看有哪些虚拟机VBoxManage list vms 查看虚拟的详细信息VBoxManage list vms –long 查看运行着的虚拟机VBoxManage list runningvms 开 ...
- SharePoint 2013 网站搜索规则的使用示例
前言 SharePoint 2013搜索中,有一个非常好用的细化搜索结果的功能,就是“查询规则”.可以通过对于某些特定查询时,起到细化显示结果的作用.下面,我们简单的介绍一下该功能的使用和效果. 1. ...
- View and Data API Tips: how to make viewer full screen
By Daniel Du If you have not heard of View and Data API, here is the idea, the View & Data API e ...
- eclipse — Failed to load the JNI shared library”……\jvm.dll问题原因以及解决方案
首先上一张出现问题的图片: 出现这个问题一般是你的jdk和eclipse不是同一位的,比如你的jdk是32位的但是eclipse下载的是64位的就会导致这种问题. 解决方案:把两者都换为32或者64位 ...
- Picasso设置圆角
package liu.roundimagedemo.view; import android.graphics.Bitmap; import android.graphics.BitmapShade ...