美文网首页前端开发
px em rem %常用单位总结

px em rem %常用单位总结

作者: 丘可_2874 | 来源:发表于2019-04-17 23:19 被阅读127次

px(像素)

px这个单位用的最多,最熟悉。px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率的最小分割。

缺点:由于它是固定大小的单位,单独用它来设计的网页,如果适应大屏幕(电脑),在小屏幕(手机)上就会很不友好,做不到自适应的效果。

em(相对长度单位)

em单位用的也比较多,特别是国外;em单位的名称为相对长度单位,它是用来设置文本的字体尺寸的,它是相对于当前对象内文本的字体尺寸;如果没有人为设置当前对象内文本的字体尺寸,那么它相对的是浏览器默认的字体尺寸(16px)。

em是相对于父级元素的,如父级元素div,div设置的字体大小为30px,所以0.5em计算后的字体大小为:30px x 0.5 = 15px

rem(css3新增的相对长度单位)

rem是css3新增的一个相对长度单位,它的出现是为了解决em的缺点,em可以说是相对于父级元素的字体大小,当父级元素字体大小改变时,又得重新计算。rem出现就可以解决这样的问题,rem只相对于根目录,即HTML元素。所以只要在html标签上设置字体大小,文档中的字体大小都会以此为参照标准.

一般用于自适应布局。

%(百分比)

%也很常见,它和em差不多一样,都是相对于父级元素。但%可以在很多属性中使用,比如:width、height、font-size等。而em是用来设置字体大小(font-size)的单位,提醒大家,width、height等属性是没有em单位的。

px、em、rem和%的区别与总结

1.px是固定长度单位,不随其它元素的变化而变化;

2.em和%是相对于父级元素的单位,会随父级元素的属性(font-size或其它属性)变化而变化;

3.rem是相对于根目录<html>的font-size的,所以它会随HTML元素的属性(font-size)变化而变化,只需要确定这一个font-size;

4.px和%用的比较广泛一些,可以充当更多属性的单位,而em和rem是字体大小的单位,用于充当font-size属性的单位;

5.一般来说:1em = 1rem = 100% = 16 px

那么问题来了,如何做适配呢?

思路整理欢迎补充~hahah...

相关文章

  • px em rem %常用单位总结

    px(像素) px这个单位用的最多,最熟悉。px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/...

  • 11.CSS布局篇之响应式——rem

    rem是什么? px,绝对长度单位,最常用 em,相对长度单位,相对于父元素,不常用 rem,相对长度单位,相对于...

  • px, em, rem 的区别和使用场景

    区别 CSS 中,目前我们常用到的长度单位有 px, em, rem。 绝对长度单位px(pixel 像素): 相...

  • rem,px,em单位区别

    rem,px,em单位区别

  • 2-28

    csshttp://phpstudy.net/css3/ 先从单位学起,单位常用的有:px,rem,em

  • em和rem

    css中单位长度用的最多的就是px,em,rem。其中,px是固定像素。em和rem是相对长度单位,em相对于父元...

  • CSS样式表中单位em的来历

    在构建css样式表的时候常用的单位有px,em,rem,在实际应用中已经很少使用px,“px是绝对单位,e...

  • 常见单位梳理

    单位(px/em/rem、vw/vh/vmin/vmax) px px像素(Pixel)。相对长度单位。像素px是...

  • css常用单位总结: px / em / rem / vw /

    1. css 的单位: px / em / rem / vw / vh / vmax / vmin (7个) 1....

  • px vs em vs rem

    px、em和rem都是网页设计中的长度单位。px是最常用的单位,它是 Pixel 的缩写代表像素,它是计算机图像显...

网友评论

    本文标题:px em rem %常用单位总结

    本文链接:https://www.haomeiwen.com/subject/zmdwwqtx.html