Community Learn Tools Library Leisure
search
English
Home > List of blog posts > rem+vw布局原理和grid布局学习
Blogger Information
Blog 14
fans 0
comment 0
visits 8299
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
551 people have browsed it

1. rem+vw布局原理

简单说明：
  • vw 相对于视口的宽度。视口被均分为100单位的vw
  • vh 相对于视口的高度。视口被均分为100单位的vh
  • calc 是 css3提供的一个在css文件中计算值的函数：用于动态计算长度值。
  • calc()函数支持 “+”, “-“, “*”, “/“ 运算；
  • calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
  • calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小
  • 1rem = 100px
代码演示：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>注册页</title>
  10.     <style>
  11.         * {
  12.             padding: 0;
  13.             margin: 0;
  14.             box-sizing: border-box;
  15.         }
  17.         html {
  18.             font-size: calc(100vw / 3.75);
  19.         }
  21.         body {
  22.             position: relative;
  23.             font-size: 0.13rem;
  24.             color: #505050;
  25.             background: #fff;
  26.             height: 100vh;
  27.         }
  29.         @media screen and (max-width: 320px) {
  30.             html {
  31.                 font-size: 85px;
  32.             }
  33.         }
  35.         @media screen and (min-width: 640px) {
  36.             html {
  37.                 font-size: 170px;
  38.             }
  39.         }
  41.         .container {
  42.             width: 2rem;
  43.             margin: 0 auto;
  44.         }
  46.         h2 {
  47.             text-align: center;
  48.         }
  50.         .form-control {
  51.             width: 2rem;
  52.             height: 0.23rem;
  53.         }
  55.         .form-group,
  56.         .btn {
  57.             margin-top: 0.1rem;
  58.         }
  60.         .form-group>.label {
  61.             display: block;
  62.         }
  64.         .form-group>.form-control {
  65.             border: 1px solid #bfc0c5;
  66.         }
  68.         .form-group>.form-control:hover {
  69.             border: 1px solid #474d5b;
  70.             color: #383e4b;
  71.         }
  72.     </style>
  73. </head>
  75. <body>
  76.     <div class="container">
  77.         <h2>注 册</h2>
  79.         <form action="php.html">
  80.             <div class="form-group">
  81.                 <label class="label" for="name">用户名：</label>
  82.                 <input type="text" class="form-control" id="name" placeholder="请输入用户名" />
  83.             </div>
  84.             <div class="form-group">
  85.                 <label class="label" for="password">密码</label>
  86.                 <input type="password" class="form-control" id="password" placeholder="请输入密码" />
  87.             </div>
  88.             <div class="form-group">
  89.                 <label class="label" for="email">Email</label>
  90.                 <input type="email" class="form-control" id="email" placeholder="请输入Email" />
  91.             </div>
  92.             <div class="form-group">
  93.                 <input class="form-checkbox" id="checkbox" type="checkbox" value="value" />
  94.                 <label class="labelb" for="checkbox">勾选登录</label>
  95.             </div>
  96.             <button type="button" class="btn">登录</button>
  97.         </form>
  98.     </div>
  99. </body>
  101. </html>
示例图：

2. 实例演示grid布局中的所有属性

简单说明：
  • 使用 CSS Grid布局首要的第一步，就是通过 display:grid; 来对容器声明一个网格容器，那么这个 div 元素里面对应的子元素就自动成为网格项目
  • grid-template-columns 属性用于设置网格布局中的列数及宽度
  • grid-template-rows 属性用于设置网格布局中的行数及高度
  • grid-gap 用来指定列（或行）的间距
  • fr 可以自动根据网格容器的宽度来计算列的宽度
代码演示：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>布局(grid版)</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         body {
  17.             background-color: rgb(210, 221, 210);
  18.         }
  20.         .grid {
  21.             width: 100vm;
  22.             height: 100vh;
  23.             display: grid;
  24.             gap: 10px 10px;
  25.             grid-template-columns: 1fr 4fr;
  26.             grid-template-rows: 100%;
  27.         }
  29.         .left {
  30.             display: grid;
  31.             grid-template-columns: 1fr;
  32.             grid-row-gap: 10px;
  33.         }
  35.         .left>.lb {
  36.             display: grid;
  37.             grid-template-columns: 1fr 1fr;
  38.             gap: 10px 10px;
  39.         }
  41.         .right {
  42.             display: grid;
  43.             grid-template-columns: 1fr;
  44.             gap: 10px;
  45.             grid-template-rows: 30%;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="grid">
  52.         <div class="left">
  53.             <div class="lt" style="background-color: #f78783">1</div>
  54.             <div class="lb">
  55.                 <div style="background-color: #9983ce">3</div>
  56.                 <div style="background-color: #7ec42f">5</div>
  57.             </div>
  58.         </div>
  59.         <div class="right">
  60.             <div style="background-color: #dd34b3">2</div>
  61.             <div style="background-color: #d8ee12">4</div>
  62.         </div>
  63.     </div>
  64. </body>
  66. </html>
示例图：

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