在css中px、em、rem,这三个的区别是:
- px是固定像素,一旦设置了就无法因为适应页面而改变。
- em是rem相对于px更具有灵活性,他们是相对于长度单位的变化而变化,更适应于响应式布局。
em相对于父元素
rem相对于根元素
em的具体解析:
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话相对于该元素的font-size
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { font-size: 40px; width: 10em; /* 400px */ height: 10em; background-color: aqua; } p { font-size: 0.5em;/* 在div的基础上大小再除以2 */ width: 20em; /* 10em表示和font-size同等大小,以此乘除表示放大或缩小几倍 */ height: 10em; background-color: blueviolet; } span { font-size: 0.5em; /* 在p的基础上大小再除以2 */ width: 10em; height: 10em; background-color: chartreuse; display: block; } </style> </head> <body> <div> 我是父亲div <p> 我是儿子p <span>孙子span</span> </p> </div> </body> </html>
rem具体解析:
rem是全部的长度都相当于根元素,根元素是谁?<html>
元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位为rem。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> html { font-size: 10px; } div { font-size: 4rem; /* 10px为1rem */ width: 40rem; /* 10px为1rem */ height: 40rem; background-color: aquamarine; } p { font-size: 2rem; /* 20px */ width: 30rem; height: 30rem; background-color: plum; } span { font-size: 1.5rem; width: 10rem; height: 10rem; background-color: peru; display: block; } </style> </head> <body> <div> 我是父亲div <p> 我是儿子p <span>孙子span</span> </p> </div> </body> </html>
当用rem做响应式时(与Bootstrap搭配食用),直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。
标签:em,区别,height,width,rem,font,size From: https://www.cnblogs.com/-ZhouYi--/p/16657029.html