欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Rem+vw布局及Grid属性和应用

程序员文章站 2022-05-25 07:50:45
...

实例演示rem+vw布局

rem布局的本质是等比缩放，一般是基于宽度。浏览器默认字体：16px，这个也是默认的rem大小，1rem = 16px，但实际生产环境，为了方便计算，推荐将 1rem = 100px。

实例：

    

  1. <body>
    2. 

  2.     <div class="box">Hello ISIDUN.COM</div>
    3. 

  3.     <style>
    4. 

  4.      /* 以750px宽度的设计稿 + DPR=2为例 */
    5. 

  5.      html {
    6. 

  6.         /* font-size: 100px; */
    7. 

  7.         font-size: calc(100vw / 3.75);
    8. 

  8.       }
    9. 

  9.       body {
    10. 

  10.         /* 把字号还原为浏览器默认的字号:16px */
    11. 

  11.         font-size: 0.16rem;
    12. 

  12.       }
    13. 

  13.       .box {
    14. 

  14.         border: 1px solid #000;
    15. 

  15.         width: 2rem;
    16. 

  16.         height: 0.5rem;
    17. 

  17.         background-color: lightblue;
    18. 

  18.         box-sizing: border-box;
    19. 

  19.       }
    20. 

  20.       /* vm是当前屏幕宽度的百分比，1vm = 1% */
    21. 

  21.       @media screen and (max-width: 320px) {
    22. 

  22.         html {
    23. 

  23.           /* 当屏幕太小的时候，字体不至于太小 */
    24. 

  24.           font-size: 85px;
    25. 

  25.         }
    26. 

  26.       }
    27. 

  27.       @media screen and (min-width: 640px) {
    28. 

  28.         html {
    29. 

  29.           /* 当屏幕太大的时候，字体不至于太大 */
    30. 

  30.           font-size: 170px;
    31. 

  31.         }
    32. 

  32.       }
    33. 

  33.     </style>
    34. 

  34.   </body>
    35.

Grid布局的属性

Grid属性包含：容器属性与项目属性

基本页面

    

  1. <body>
    2. 

  2.     <div class="container">
    3. 

  3.         <div class="item"></div>
    4. 

  4.     </div>
    5. 

  5. </body>
    6.

容器属性

    

  1. <style>
    2. 

  2.     .container {
    3. 

  3.         width: 30em;
    4. 

  4.         height: 30em;
    5. 

  5.         background-color: wheat;
    6. 

  6.         /* grid布局 */
    7. 

  7.         display: grid;
    8. 

  8.         /* 显式网格 */
    9. 

  9.         grid-template-columns: repeat(3, 10em);
    10. 

  10.         grid-template-rows: repeat(3, 10em);
    11. 

  11.     }
    12. 

  12. </style>
    13.

项目属性

    

  1. <style>
    2. 

  2.       .container > .item {
    3. 

  3.         background-color: violet;
    4. 

  4.         /* 默认 grid-row：起始行/结束行，默认占一个单元格 */
    5. 

  5.         grid-row: 2/3;
    6. 

  6.         grid-column: 2/3;
    7. 

  7.         /* 网格区域：方法一 */
    8. 

  8.         grid-row: 2/4;
    9. 

  9.         grid-column: 2/4;
    10. 

  10.         /* 网格区域：方法二 */
    11. 

  11.         grid-row: 2 / span 2;
    12. 

  12.         grid-column: 1 / span 3;
    13. 

  13.         /* 简化创建网格区域：行开始/列开始/行结束/列结束（方法一） */
    14. 

  14.         grid-area: 3 / 1 / 4 / 4;
    15. 

  15.         /* 简化创建网格区域：方法二 */
    16. 

  16.         grid-area: 1 / 1 / span 1 / span 3;
    17. 

  17.       }
    18. 

  18.     </style>
    19.

Grid应用

利用Grid方式，仿写PHP.CN课程中心，“我的课程作业”页面布局

原页面截图

Rem+vw布局及Grid属性和应用

仿写页面布局

Rem+vw布局及Grid属性和应用

核心代码

    

  1. <body>
    2. 

  2.     <div class="container">
    3. 

  3.       <div class="header">header</div>
    4. 

  4.       <div class="left">
    5. 

  5.         <ul>
    6. 

  6.           <li><a href="#">菜单1</a></li>
    7. 

  7.           <li><a href="#">菜单2</a></li>
    8. 

  8.           <li><a href="#">菜单3</a></li>
    9. 

  9.           <li><a href="#">菜单4</a></li>
    10. 

  10.           <li><a href="#">菜单5</a></li>
    11. 

  11.           <li><a href="#">菜单6</a></li>
    12. 

  12.           <li><a href="#">菜单7</a></li>
    13. 

  13.           <li><a href="#">菜单8</a></li>
    14. 

  14.         </ul>
    15. 

  15.       </div>
    16. 

  16.       <div class="main">
    17. 

  17.         <h1>我的课程作业</h1>
    18. 

  18.         <div class="article">
    19. 

  19.           <div></div>
    20. 

  20.           <h3>2021-12-31</h3>
    21. 

  21.           <div class="item">Pictures</div>
    22. 

  22.           <div class="item">
    23. 

  23.             <p>作业标题：12月31日作业</p>
    24. 

  24.             <p>作业内容：1. 实例演示: 流程控制的分支,循环</p>
    25. 

  25.           </div>
    26. 

  26.           <div class="item">
    27. 

  27.             <button>我要做作业</button>
    28. 

  28.           </div>
    29. 

  29.           <div class="item">
    30. 

  30.             <p>老师尚未批改.</p>
    31. 

  31.           </div>
    32. 

  32.           <div></div>
    33. 

  33.         </div>
    34. 

    35. 

  35.         <div class="article">
    36. 

  36.           <div></div>
    37. 

  37.           <h3>2021-12-31</h3>
    38. 

  38.           <div class="item">Pictures</div>
    39. 

  39.           <div class="item">
    40. 

  40.             <p>作业标题：12月31日作业</p>
    41. 

  41.             <p>作业内容：1. 实例演示: 流程控制的分支,循环</p>
    42. 

  42.           </div>
    43. 

  43.           <div class="item">
    44. 

  44.             <button>我要做作业</button>
    45. 

  45.           </div>
    46. 

  46.           <div class="item">
    47. 

  47.             <p>老师尚未批改.</p>
    48. 

  48.           </div>
    49. 

  49.           <div></div>
    50. 

  50.         </div>
    51. 

  51.       </div>
    52. 

  52.       <div class="right">right</div>
    53. 

  53.       <div class="footer">footer</div>
    54. 

  54.     </div>
    55. 

  55.     <style>
    56. 

  56.       * {
    57. 

  57.         margin: 0;
    58. 

  58.         padding: 0;
    59. 

  59.         box-sizing: border-box;
    60. 

  60.       }
    61. 

  61.       .container {
    62. 

  62.         display: grid;
    63. 

  63.         grid-template-columns: 200px 1fr 100px;
    64. 

  64.         grid-template-rows: 10em calc(100vh - 15em - 1em) 5em;
    65. 

  65.         gap: 0.5em;
    66. 

  66.       }
    67. 

  67.       .container .header,
    68. 

  68.       .container .footer {
    69. 

  69.         grid-column: span 3;
    70. 

  70.         background-color: thistle;
    71. 

  71.       }
    72. 

  72.       .container > .left {
    73. 

  73.         place-self: start center;
    74. 

  74.       }
    75. 

  75.       .article {
    76. 

  76.         display: grid;
    77. 

  77.         grid-template-columns: 1em 10em 1fr 10em;
    78. 

  78.         grid-template-rows: 2em 8em 2em;
    79. 

  79.         border-left: 2px solid lightgray;
    80. 

  80.         margin-top: 2em;
    81. 

  81.       }
    82. 

  82.       .article div:nth-of-type(1) {
    83. 

  83.         grid-row: span 4;
    84. 

  84.       }
    85. 

  85.       .article div:last-of-type {
    86. 

  86.         /* background-color: coral; */
    87. 

  87.         grid-column: span 3;
    88. 

  88.         border-bottom: 1px solid lightgray;
    89. 

  89.       }
    90. 

  90.       .article h3 {
    91. 

  91.         padding-left: 1em;
    92. 

  92.         grid-column: span 3;
    93. 

  93.       }
    94. 

  94.       .article > .item:nth-of-type(2),
    95. 

  95.       .article > .item:nth-of-type(4) {
    96. 

  96.         grid-row: span 2;
    97. 

  97.         place-self: center;
    98. 

  98.       }
    99. 

  99.       .article button {
    100. 

  100.         border: 2px solid red;
    101. 

  101.         width: 100px;
    102. 

  102.         height: 50px;
    103. 

  103.       }
    104. 

  104.       .article > .item:nth-of-type(5) {
    105. 

  105.         font-size: 0.8em;
    106. 

  106.         font-family: "楷体";
    107. 

  107.       }
    108. 

  108.     </style>
    109. 

  109.   </body>
    110.

上一篇： 详谈HTML表格和表单

下一篇： 初学者怎么画出眼睛？板绘眼睛的步骤

推荐阅读