关于px em rem 以及其如何处理移动端的适配问题

最新推荐文章于 2024-03-16 14:03:27 发布

smshlzy

最新推荐文章于 2024-03-16 14:03:27 发布

阅读量248

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44141866/article/details/104931457

版权

本文介绍了px, em, rem在CSS中的区别，强调了它们在移动端适配中的应用。em具有继承性，而rem相对于根元素。px为固定长度单位。在解决移动端适配问题上，可以通过调整html的font-size使用rem，或者利用vw/vh基于视窗宽度和高度的单位实现响应式布局。" 128347405,16808314,Node.js毕业设计：校园卡管理系统实现,"['Node.js', 'Express', '数据库设计', 'Web开发', '校园系统']

摘要由CSDN通过智能技术生成

px em rem的区别

px：绝对长度单位。
em：
（1）相对长度单位。（其相对于当前对象内文本的字体尺寸），所以em的值并不固定。
（2）em具有继承性，继承父级元素的字体大小，所有字体都是相对父元素大小的。（所以在移动端很少使用）
（3）如若当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体大小。默认字体大小是1em=16px。
理解如下：

在这里插入图片描述其中body的font-size：62.5%即是10px=16px62.5%得来的；#app中的font-size：1.2em即是由1.2em=12px=1.210px得来的（继承父元素body）；#app p中的font-size：1.2em即是由1.2em=14.4px=1.2*12px得来的（继承父元素#app）
rem:
（1）相对长度单位。（全名root em，简写rem，是css3中新增的）。
（2）em没有继承性，只是相对于根元素字体大小的单位。即：1rem=html根元素所设定的font-size的px值。