首页 > 其他 > 详细

日常博客----rem,em的恩怨相杀

时间:2017-11-09 18:22:13      阅读:216      评论:0      收藏:0      [点我收藏+]

基本知识:

使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小。 我们可以使用这种灵活性,使我们在开发期间,能更加快速灵活的调整,允许浏览器用户调整浏览器大小来达到最佳体验。

1rem = 16px;   

1em = 16px;

(这个不一定,根据浏览器默认的字体大小来调整,一般浏览器字体默认16px)

 

rem相对html顶部元素大小当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

em相对父元素大小。(这个一般都这样叫,其实也没错,只是当你在本身设置了字体大小em,长度就根据这个字体大小来对比计算,而不是根据父元素,父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承)

技术分享

 

技术分享

 

rem和em一般不用16px计算,不好算,一般转换1rem = 100px; 

比较:

个人喜欢rem,(可能是高中物理考试参照物一直不懂,火车上放小球,站在飞机上和大马路看的区别....),因为有一个固定参照点,所有的一切都按照一个点计算比较。但是有时候也比较麻烦,因为所有都按照一个点计算长度。有时候相对更好点(比如拿一个死胖子来对比日本前十nv,你会发现根本没有对比性,然而要你根据死胖子来比较这十个nv哪个更好看那就很难....),

所以,我是这样写的,当你修饰一个大大的框时,最好用rem,因为好计算,最外层的div啊,一个文本框的大小啊,导航条啊,一般用rem.

那什么时候用em嘞,当你需要修饰一个按钮里的字体时,或者修饰父元素长度已知并且好算时(width = 10rem.....)可以尝试使用em

 原文: http://www.w3cplus.com/css/when-to-use-em-vs-rem.html ? w3cplus.com)

日常博客----rem,em的恩怨相杀

原文:http://www.cnblogs.com/PHOTO-NO/p/7810625.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!