search

博客列表 >Rem+vw布局及Grid属性和应用

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

**
**原创
2022年01月04日 17:21:45454浏览

实例演示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>
上一条：Python变量名详细规则详细变量值介绍下一条：Java使用JDBC连接数据库的详细步骤
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多