Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em rem vh vw与响应式布局
Blogger Information
Blog 16
fans 0
comment 0
visits 15798
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
em rem vh vw与响应式布局
Allen在php中文网的学习笔记
Original
675 people have browsed it

作业内容

作业标题：1217作业
作业内容：

  1. 按自己理解的方式详细描述em,rem的原理与应用场景 ，并实例演示
  2. 分析 rem / em /vh/ vw的区别与联系

作业代码

  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>1217作业</title>
  7.     <style>
  8.         /* html默认的大小应该是16px = 1em */
  10.         /* 我们这里重新定义 根元素的 1em等于 16*1.25=20 */
  11.         /* 此时 其他元素的 1em=20px */
  12.         html{
  13.             font-size:1.25em;
  14.         }
  16.         /* h1的默认fontsize是2个em。在devtool里面我们可以看到 h1 font-size=2em， computed里面显示等于40px */
  18.         /* h2默认1.5em 此时是30px */
  19.         /* 此时我们定义字体大小等于1rem。 而rem是相对于根元素定义的rem来作为单位的 */
  20.         /* 此时观察 我们发现，h2的字体大小仅有1rem = 20px = 我们定义的根元素的em */
  21.         h2{
  22.             font-size: 1rem;
  23.         }
  26.         /* 创建一个box容器 示例演示 */
  27.         .box{
  28.             width: 5rem;
  29.             height: 5rem;
  30.         }
  31.         /* 如果屏幕宽度小于500px 那么 我们重新定义根元素 1rem = 32px */
  32.         @media screen and (min-width: 500px) {
  33.             html{
  34.                 font-size: 2rem;
  35.             }
  36.             .box{
  37.                 background-color: red;
  38.             }
  40.         }
  42.         /* 如果屏幕宽度小于800px 那么 我们重新定义根元素 1rem = 32px */
  43.         @media screen and (min-width: 800px) {
  44.             html{
  45.                 font-size: 3rem;
  46.             }
  47.             .box{
  48.                 background-color: green;
  49.             }
  51.         }
  52.         /* 如果屏幕宽度小于1000px 那么 我们重新定义根元素 1rem = 32px */
  53.         @media screen and (min-width: 1000px) {
  54.             html{
  55.                 font-size: 4rem;
  56.             }
  57.             .box{
  58.                 background-color: yellow;
  59.             }
  61.         }
  63.         .box2{
  64.             width: 50vmin;
  65.             height: 50vmin;
  66.             background-color: #000;
  67.             margin: auto;
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  73.     <h1>城南花开</h1>
  74.     <h2>www.gzj2001.com</h2>
  75.     <span>em与rem在响应式布局里面更有优势，通过不同的设备尺寸查询，仅修改em即可完成多界面适配</span>
  76.     <br>
  77.     <span>vh /vw 将 用户看到区域划分为100份，保证用户不同大小所看到的内容不失真</span>
  78.     <br>
  79.     <span>在不同尺寸中，rem和em等会改变用户主观感知的相对比例大小，而vh vx 始终都是那个百分比</span>
  80.     <div class="box"></div>
  82.     <div class="box2"></div>
  83. </body>
  84. </html>
Correcting teacher：天蓬老师天蓬老师

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