ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

px、em、rem单位间的区别

2022-03-21 18:36:41  阅读:178  来源: 互联网

标签:em 浏览器 px 元素 html rem 字体大小


1、px

  px是pixel的缩写,中文翻译是像素的意思;我们一般用来设置元素的宽高、字体大小,查了一下它不是自然界的长度单位。px是就是一张图片中最小的点,一张图就是由这些点构成的。1024px就是1024像素,如果是1024px×768px,也就是说水平方向上有1024个点,垂直方向上有768个点。谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,像素的大小是会“变”的,也称为“相对长度”.

特点:不会随着浏览器的大小改变而改变,只要设定就是个固定值。

2、em

  em也是css中的相对单位,它是相对于父元素的字体大小来定的,如果你的父元素字体大小:font-size: 20px;那么子元素1em=20px; 如果父元素没有设置字体大小,那么会以浏览器默认的字体大小来定,浏览器默认字体大小是:font-size: 16px; 那么现在的1em=16px。

特点:会随着浏览器大小改变而改变。

3、rem

  rem是root em的缩写,root的中文翻译是根的意思,在页面中只有一个html是根元素,所以是根据html来定的,如果设置

  html {         font-size: 25px;     } 那么1rem=25px。 特点:会随着浏览器的大小改变而改变。

标签:em,浏览器,px,元素,html,rem,字体大小
来源: https://www.cnblogs.com/simple-Xiao/p/16035893.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有