2.移动端常用单位.html 748 B

123456789101112131415161718192021222324252627282930313233343536
  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. <!--
  8. px 像素
  9. rem => 1rem = 16px(跟字体大小)
  10. em 根据父元素
  11. vw 当前视口的宽度
  12. vh 当前视口的高度
  13. -->
  14. <style>
  15. * {
  16. margin: 0;
  17. padding: 0;
  18. font-size: 26px;
  19. }
  20. #box {
  21. width: calc(50vw - 100px);
  22. height: 100vh;
  23. background: #00f;
  24. font-size: 14px;
  25. }
  26. p {
  27. font-size: 2em;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="box">
  33. <p>你好</p>
  34. </div>
  35. </body>
  36. </html>