1_rem与em.html 856 B

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. html{
  9. font-size: 20px;
  10. }
  11. #box{
  12. /* rem单位 她是根元素的字体大小的倍数 html的font-size */
  13. /* 20rem = 20*20 = 400px */
  14. width: 20rem;
  15. height: 20rem;
  16. background-color: red;
  17. }
  18. #div1{
  19. font-size: 20px;
  20. }
  21. #div2{
  22. /* em单位 她是父元素的字体大小的倍数 父元素的font-size */
  23. width: 10em;
  24. height: 10em;
  25. background-color: blue;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="box"></div>
  31. <div id="div1">
  32. <div id="div2"></div>
  33. </div>
  34. </body>
  35. </html>