px

相对长度单位。像素(Pixel)。

像素是相对于显示器屏幕分辨率而言的。例如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。(css手册3.0)

em

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 (css手册3.0)

google的默认字体高是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

rem

是css3新增的相对长度单位,相对于html根元素设置的文本尺寸单位。只需设置根元素尺寸,则内容所有字体可按比例调整大小。

对于需要适配各种移动设备,会使用rem长度单位,采用媒体查询方法获取分辨率设置html根元素大小

/*移动端适配*/
@media screen and (min-width: 320px){
html{
font-size: 16px;
}
}
@media screen and (min-width: 360px){
html{
font-size: 18px;
}
}
@media screen and (min-width: 375px){
html{
font-size: 18.75px;
}
}

单位px和em,rem的区别的更多相关文章

  1. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  2. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  3. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  4. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  5. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  6. css中单位px和em,rem的区别[转载]

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  8. 网页布局设计css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. px,em, rem的区别,在项目中怎么使用rem.

    一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...

随机推荐

  1. kuangbin专题 专题九 连通图 POJ 3177 Redundant Paths

    题目链接:https://vjudge.net/article/371?tdsourcetag=s_pcqq_aiomsg 题目:给定一个连通图,题目说,任意两个点至少有一条路线可以相互到达, 为保证 ...

  2. android中关于时间的控件

    1.日期选择器 <DatePicker android:layout_width="wrap_content" android:layout_height="wra ...

  3. node的httpserver简单创建

    1.设计原则为文件夹名字可以依据资源来命名,静态资源统一命名 ps:路径中绝对和相对路径,依据server.js本身的位置而言 const http = require("http" ...

  4. 一个C语言程序是由( )组成?

    A) 一个主程序和若干子程序组成 B)一个或多个函数组成 C) 若干过程组成 D) 若干子程序组成 正确答案 B 解析 [解析] 一个C源程序是由一个main函数和若干个其他函数组成的.函数是C程序的 ...

  5. grep 基本用法

    grep usage: grep [options]... pattern [file]... 如果file缺省,会从 stdin 读取 $ grep --help -i 忽略大小写 -n 显示行号 ...

  6. 查看包名和Activity

    包名:adb shell pm list package -f 获取手机内所有apk对应的路径和包名 f 后加要查找的app的关键词可快速找到你想要的app包名 Activity:adb shell ...

  7. Python_基础数据类型

    一,首先介绍一下变量 1. 变量是什么 在Python中,变量的概念基本上和初中代数的方程变量是一致的. 2. 变量命名规则 由数字.字母.下划线组成 不能以数字开头 要具有描述性 要区分大小写 禁止 ...

  8. mui退出登录

    html部分: <button id='promptBtn' type="button" class="mui-btn mui-btn-block mui-btn- ...

  9. css样式的兼容性

    浏览器                 前缀 IE和safari             -webkit- Chrome                -ms- Firefox            ...

  10. iframe刷新另一个iframe

    如果是程序: Response.Write("<script language=javascript>");                Response.Write ...