彻底弄懂响应式设计中的em和rem

前一阵子在响应式开发中遇到了em和rem的问题，也上网搜过一些文章，篇幅很长，也没有仔细看，今天来总结一下。

rem是指：根元素（root element，html）的字体大小，

em是指：父元素的字体大小。

下面看一个例子：

div{
font-size: 30px;
}
div span{
font-size: 2em;
}<div>
div下的元素
<span>span里的元素</span>
</div>

　　在chrome中显示：

也就是说，span里的文字大小是根据父元素div的font-size大小设置的。

测试rem的代码和运行结果就不贴上来了

body{

　　font-size:16px;

}

　　font-size:2rem;/*此时p元素中的文字size为32px；

}

可以设置body的font-size为62.5%，也就是10px（比如浏览器默认字体大小16px），1.3rem=13 px，计算方便点;

注:可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值。

文章为原创，转载请注明出处，谢谢

转载于:https://www.cnblogs.com/gagag/p/6080500.html

彻底弄懂响应式设计中的em和rem相关推荐

响应式设计中怎样布局？
多栏布局中最大的挑战之一就是确保它能在各种各样的屏幕尺寸下正确工作.为此,提出了响应式网页设计.简单来说,就是开发一个其文本.图像和其他的媒体能够适应任何移动设备.桌面计算机或一些未来设备的浏览器体验 ...
HTML5CSS3笔记：响应式设计中的 HTML5
所有现代浏览器都能够正确理解常见的 HTML5 新特性(新的结构元素.视频和音频标签), 而对老版本的 IE 则可以使用腻子脚本来弥补我所遇到过的所有缺陷. 什么是腻子脚本? 腻子脚本(polyfil ...
平面设计中的网格系统_干货 | 手把手教你做#响应式设计# 还有标准栅格系统库分享！...
不管是做平面设计还是UI设计的同学,「网格系统」(又称栅格系统)都是经常听到的专有名词,但是一遇到栅格系统如何指导我们做响应式设计的问题,很多同学都会一脸懵*.本期推荐Ivan.Zheng的深度好文, ...
基于物理尺寸的响应式设计(转)
两种Queries之间的细微区别比较如下两个media-query声明: @media (min-resolution: 341dpi) and (min-width: 767px) > ...
响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述屏幕分辨率.设备像素(device-width)和CSS像素(width)这些术语,在很多语境下,是可互换的,但也因此容易在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是 ...
响应式设计视口 viewport 媒体查询
响应式网页设计能让手机.平板电脑等均能获得完美的浏览体验,能够兼顾多屏幕.多场景的灵活设计,这与一次编写,到处运行有异曲同工的作用. 移动端设备的使用率虽然越来越高,但是计算机端用户也还有不少,基于这 ...
em表示什么长度单位_css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
qt布局中listwidget 保持固定宽度_UI设计中响应式设计实用技巧
响应式布局这个名词相信大部分设计师都不陌生,也能清楚知道它的基本呈现效果.寻找资料时发现大多数教程都是针对前端开发工程师打造的,并伴随着许多晦涩难懂的专业名词,让人难以理解. 什么是响应式布局响应式 ...
UI设计中如何做响应式设计与自适应设计
UI设计中如何做响应式设计与自适应设计?由于科技在不断的发展,小伙伴们上网就不单单只依靠台式电脑了,还有平板电脑笔记本电脑都是可供大家选择的.面对不同的屏幕分辨率网站是如何进行适配的呢?今天AAA教育 ...

彻底弄懂响应式设计中的em和rem

彻底弄懂响应式设计中的em和rem相关推荐

最新文章

热门文章