Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Rem+vw布局及Grid属性和应用
Blogger Information
Blog 11
fans 0
comment 0
visits 6946
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Rem+vw布局及Grid属性和应用
**
Original
453 people have browsed it

实例演示rem+vw布局

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

实例：

  1. <body>
  2.     <div class="box">Hello ISIDUN.COM</div>
  3.     <style>
  4.      /* 以750px宽度的设计稿 + DPR=2为例 */
  5.      html {
  6.         /* font-size: 100px; */
  7.         font-size: calc(100vw / 3.75);
  8.       }
  9.       body {
  10.         /* 把字号还原为浏览器默认的字号:16px */
  11.         font-size: 0.16rem;
  12.       }
  13.       .box {
  14.         border: 1px solid #000;
  15.         width: 2rem;
  16.         height: 0.5rem;
  17.         background-color: lightblue;
  18.         box-sizing: border-box;
  19.       }
  20.       /* vm是当前屏幕宽度的百分比，1vm = 1% */
  21.       @media screen and (max-width: 320px) {
  22.         html {
  23.           /* 当屏幕太小的时候，字体不至于太小 */
  24.           font-size: 85px;
  25.         }
  26.       }
  27.       @media screen and (min-width: 640px) {
  28.         html {
  29.           /* 当屏幕太大的时候，字体不至于太大 */
  30.           font-size: 170px;
  31.         }
  32.       }
  33.     </style>
  34.   </body>

Grid布局的属性

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

基本页面

  1. <body>
  2.     <div class="container">
  3.         <div class="item"></div>
  4.     </div>
  5. </body>

容器属性

  1. <style>
  2.     .container {
  3.         width: 30em;
  4.         height: 30em;
  5.         background-color: wheat;
  6.         /* grid布局 */
  7.         display: grid;
  8.         /* 显式网格 */
  9.         grid-template-columns: repeat(3, 10em);
  10.         grid-template-rows: repeat(3, 10em);
  11.     }
  12. </style>

项目属性

  1. <style>
  2.       .container > .item {
  3.         background-color: violet;
  4.         /* 默认 grid-row：起始行/结束行，默认占一个单元格 */
  5.         grid-row: 2/3;
  6.         grid-column: 2/3;
  7.         /* 网格区域：方法一 */
  8.         grid-row: 2/4;
  9.         grid-column: 2/4;
  10.         /* 网格区域：方法二 */
  11.         grid-row: 2 / span 2;
  12.         grid-column: 1 / span 3;
  13.         /* 简化创建网格区域：行开始/列开始/行结束/列结束（方法一） */
  14.         grid-area: 3 / 1 / 4 / 4;
  15.         /* 简化创建网格区域：方法二 */
  16.         grid-area: 1 / 1 / span 1 / span 3;
  17.       }
  18.     </style>

Grid应用

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

原页面截图

仿写页面布局

核心代码

  1. <body>
  2.     <div class="container">
  3.       <div class="header">header</div>
  4.       <div class="left">
  5.         <ul>
  6.           <li><a href="#">菜单1</a></li>
  7.           <li><a href="#">菜单2</a></li>
  8.           <li><a href="#">菜单3</a></li>
  9.           <li><a href="#">菜单4</a></li>
  10.           <li><a href="#">菜单5</a></li>
  11.           <li><a href="#">菜单6</a></li>
  12.           <li><a href="#">菜单7</a></li>
  13.           <li><a href="#">菜单8</a></li>
  14.         </ul>
  15.       </div>
  16.       <div class="main">
  17.         <h1>我的课程作业</h1>
  18.         <div class="article">
  19.           <div></div>
  20.           <h3>2021-12-31</h3>
  21.           <div class="item">Pictures</div>
  22.           <div class="item">
  23.             <p>作业标题：12月31日作业</p>
  24.             <p>作业内容：1. 实例演示: 流程控制的分支,循环</p>
  25.           </div>
  26.           <div class="item">
  27.             <button>我要做作业</button>
  28.           </div>
  29.           <div class="item">
  30.             <p>老师尚未批改.</p>
  31.           </div>
  32.           <div></div>
  33.         </div>
  35.         <div class="article">
  36.           <div></div>
  37.           <h3>2021-12-31</h3>
  38.           <div class="item">Pictures</div>
  39.           <div class="item">
  40.             <p>作业标题：12月31日作业</p>
  41.             <p>作业内容：1. 实例演示: 流程控制的分支,循环</p>
  42.           </div>
  43.           <div class="item">
  44.             <button>我要做作业</button>
  45.           </div>
  46.           <div class="item">
  47.             <p>老师尚未批改.</p>
  48.           </div>
  49.           <div></div>
  50.         </div>
  51.       </div>
  52.       <div class="right">right</div>
  53.       <div class="footer">footer</div>
  54.     </div>
  55.     <style>
  56.       * {
  57.         margin: 0;
  58.         padding: 0;
  59.         box-sizing: border-box;
  60.       }
  61.       .container {
  62.         display: grid;
  63.         grid-template-columns: 200px 1fr 100px;
  64.         grid-template-rows: 10em calc(100vh - 15em - 1em) 5em;
  65.         gap: 0.5em;
  66.       }
  67.       .container .header,
  68.       .container .footer {
  69.         grid-column: span 3;
  70.         background-color: thistle;
  71.       }
  72.       .container > .left {
  73.         place-self: start center;
  74.       }
  75.       .article {
  76.         display: grid;
  77.         grid-template-columns: 1em 10em 1fr 10em;
  78.         grid-template-rows: 2em 8em 2em;
  79.         border-left: 2px solid lightgray;
  80.         margin-top: 2em;
  81.       }
  82.       .article div:nth-of-type(1) {
  83.         grid-row: span 4;
  84.       }
  85.       .article div:last-of-type {
  86.         /* background-color: coral; */
  87.         grid-column: span 3;
  88.         border-bottom: 1px solid lightgray;
  89.       }
  90.       .article h3 {
  91.         padding-left: 1em;
  92.         grid-column: span 3;
  93.       }
  94.       .article > .item:nth-of-type(2),
  95.       .article > .item:nth-of-type(4) {
  96.         grid-row: span 2;
  97.         place-self: center;
  98.       }
  99.       .article button {
  100.         border: 2px solid red;
  101.         width: 100px;
  102.         height: 50px;
  103.       }
  104.       .article > .item:nth-of-type(5) {
  105.         font-size: 0.8em;
  106.         font-family: "楷体";
  107.       }
  108.     </style>
  109.   </body>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post