看了好多篇博客。。。说的都模棱两可,我直接上代码来看结果总结一下,重点看图!!!!
px是固定像素,设置了就无法因为适应页面大小而改变,不随其它元素的变化而变化。
em和ren是相对长度单位,适用于响应式布局
em是用来设置文本的字体尺寸的,相对于其父元素来设置。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。
而rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。
总之:对于em和rem的区别一句话概括:
em相对于父元素,rem相对于根元素
em:
(一)子元素字体大小的em是相对于父元素字体大小
(二)元素的width/height/padding/margin用em的话是相对于该元素的font-size