rem,em
任意浏览器的默认字体高都是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作为单位就行了。
EM特点
em的值并不是固定的;
em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
body选择器中声明Font-size=62.5%;
将你的原来的px数值除以10,然后换上em作为单位;
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
rem特点
它始终是基于根元素(html) 的,需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值。
默认还是16px,除非你自己用font-size定义为其他,没有了继承父级尺寸这个关系。
rem,em的更多相关文章
- 自适应布局,响应式布局以及rem,em区别
一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
- mobile css & rem & em & px
mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...
- webview的弹性布局之rem,em
webview页面的自适应一般有两种方法,即一是JS的计算方法,二是通过css的media设置分档方式.在此主要介绍css的方式. html { font-size: 16px; } @media o ...
- rem,em,与px的比较用法
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
- rem & em初探
Rem为单位 CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上是这样描述rem的——“font size of the root element” .下面我们就一起来 ...
- px,rem,em的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 移动端布局rem em
1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...
- 字体的设置 REM EM PX
px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...
- 日常博客----rem,em的恩怨相杀
基本知识: 使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小. 我们可以使用这种灵活性,使我们在开发期间,能更加快速灵活的调整,允许浏览器用户调整浏览器大 ...
随机推荐
- 深入理解CSS绝对定位absolute
前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节 定义 当元素绝对定 ...
- /include/caffe/common.cuh(9): error: function "atomicAdd(double *, double)" has already been defined
https://stackoverflow.com/questions/39274472/error-function-atomicadddouble-double-has-already-been- ...
- codeforces166E
Tetrahedron CodeForces - 166E You are given a tetrahedron. Let's mark its vertices with letters A, B ...
- Js 百分比进度条
[构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...
- java匹配竖线的错误警示
String s1 = "|"; // 输出 | System.out.println(s1); String s2 = s1.replaceAll("|",& ...
- Elasticsearch 基础知识要点与性能监控
本文的来源是我翻译国外的一篇技术博客,感谢原作者Emily Chang,原文地址通过如下的知识,我们能大致学到关于ES的一些基本知识,进而对elasticsearch的性能进行监控和调优 注意elas ...
- Android在初始化时弹出popwindow的方法
http://blog.csdn.net/sxsboat/article/details/7340759 Android中在onCreate()时弹出popwindow,很多人都有过类似的需求吧,但 ...
- Pycharm激活、配置以及快捷方式 | 图解
访问flyai.club,一键创建你的人工智能项目 来源 | Python (python6359) Pycharm可以去官网下载 Pycharm的安装激活 jar包的目的就是让截获截止时间并骗过py ...
- 最短路算法模板--SPFA
初见SPFA时,直接认成了优先队列优化的Dijkstra,经过几位大佬的指点,我终于明白了他们的差异. Dijkstra是保证已经出队过的点不再入队,SPFA是已经在队列中不再入队.比较起来,SPFA ...
- WCF开发实战系列五:创建WCF客户端程序
WCF开发实战系列五:创建WCF客户端程序 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 在前面的三篇文章中我们分别介绍了WCF服务的三种载体:IIS.Self-Hos ...