0. px : 绝对单位,页面按精确像素展示
1. em :相对于父级的倍数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Unit</title> </head> <style> body{ font-size: 10px; } .unit-01{font-size: 1.2em;} .unit-01-1{font-size: 1.2em;} </style> <body> <!-- 相对于父级的 1.2倍 --> <div class="unit-01"> <!-- 12px = 10px * 1.2 --> cynthia娆墨旧染 <div class="unit-01-1"> <!-- 14.4px = 12px * 1.2--> cynthia娆墨旧染 </div> </div> </body> </html>
2. rem :相对于根root的倍数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rem</title> </head> <style> body{ font-size: 10px; } .unit-1{ font-size: 1.2rem; } .unit-1-1{ font-size: 1.2rem; } .unit-2{ font-size: 1.8rem; } </style> <body> <div class="unit-1"> <!-- 12px --> cynthia娆墨旧染 <div class="unit-1-1"> <!-- 12px --> cynthia娆墨旧染 </div> </div> <div class="unit-2"> <!-- 18px --> cynthia娆墨旧染 </div> </body> </html>
3. vw : viewpoint width 视窗宽度。1vw = 视窗宽度的1%
vh : viewpoint height 视窗宽度。1vh = 视窗高度的1%
vmin : vw 和 vh 中较小的那个
vman : vw 和 vh 中较大的那个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ padding: 0; margin: 0; border: 0; } .unit-1{ height:50vmin; 50vmin; background: red; float: left; } .unit-2{ height:50vmin; 50vmin; background: blue; float: left; } </style> <body> <div class="unit-1"> <!-- 较小的是宽 所以是宽的50% --> </div> <div class="unit-2"> <!-- 50% --> </div> </body> </html>
4. %
5. pt : point 大约1/72寸
6. pc : pica 大约6pt 1/6寸
7. ex : 相当于0.5的1em
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body{ font-size: 24px; } .unit-1{ font-size: 1ex; } </style> <body> <div class="unit-1"> <!-- 12px --> cynthia娆墨旧染 </div> </body> </html>