Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em及rem单位的原理及其应用
Blogger Information
Blog 50
fans 0
comment 0
visits 31586
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单位的原理及其应用
手机用户1580651468
Original
389 people have browsed it

em及rem单位的原理及其应用

一. em,rem的原理应用及优缺点

1.em和rem是相对单位，使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，

2.允许浏览器用户调整浏览器大小来达到最佳体验。Em 和 rem 单位提供的这种灵活性和工作方式都很相似。

3.em和rem的区别一句话概括：em相对于父元素，rem相对于html根元素

4.应用场景：

  1.    <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>常用单位</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">box</div>
  13.       <style>
  14.         * {
  15.           margin: 0;
  16.           padding: 0;
  17.           box-sizing: border-box;
  18.         }
  19.         .container {
  20.           width: 400px;
  21.           height: 300;
  22.           border: 1px solid #000;
  23.           background-color: lightcyan;
  24.           /* 1.px:像素（设备相关） */
  25.         }
  26.         .container .item {
  27.           width: 160px;
  28.           height: 80px;
  29.           background-color: lightgreen;
  30.           /* px:优点（精确）,缺点：不灵活 */
  31.         }
  33.         /* 2.em：继承字号 */
  34.         .container .item {
  35.           /* 1em=浏览器默认字号=html.font-size =16px */
  36.           /* 160px = 10 *1em =10 em */
  37.           width: 10em;
  38.           height: 5em;
  39.           background-color: lightskyblue;
  40.         }
  41.       </style>
  42.     </div>
  43.   </body>
  44. </html>

运行效果

二. (选做) 使用rem + vw 重写 课程表 案例, css中不允许出现px,试试看

1.html的代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表格中常用的样式</title>
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         重庆职教中心课程表
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>时间</th>
  17.           <th>周一</th>
  18.           <th>周二</th>
  19.           <th>周三</th>
  20.           <th>周四</th>
  21.           <th>周五</th>
  22.         </tr>
  23.       </thead>
  24.       <!-- 上午 -->
  25.       <!-- 第一个tbody  -->
  26.       <tbody>
  27.         <tr>
  28.           <td rowspan="4" class="period">上午</td>
  29.           <td>数学</td>
  30.           <td>数学</td>
  31.           <td>专业</td>
  32.           <td>专业</td>
  33.           <td>数学</td>
  34.         </tr>
  35.         <tr>
  36.           <td>数学</td>
  37.           <td>数学</td>
  38.           <td>专业</td>
  39.           <td>专业</td>
  40.           <td>数学</td>
  41.         </tr>
  42.         <tr>
  43.           <td>语文</td>
  44.           <td>语文</td>
  45.           <td>专业</td>
  46.           <td>专业</td>
  47.           <td>语文</td>
  48.         </tr>
  49.         <tr>
  50.           <td>英语</td>
  51.           <td>英语</td>
  52.           <td>专业</td>
  53.           <td>专业</td>
  54.           <td>英语</td>
  55.         </tr>
  56.       </tbody>
  57.       <!-- 中午 -->
  59.       <!-- 第二个tbody  -->
  60.       <tbody>
  61.         <tr>
  62.           <td colspan="6">午休</td>
  63.         </tr>
  64.       </tbody>
  65.       <!-- 下午 -->
  66.       <!-- 第3个tbody  -->
  67.       <tbody>
  68.         <tr>
  69.           <td rowspan="3" class="period">下午</td>
  70.           <td>音乐</td>
  71.           <td>音乐</td>
  72.           <td>体育</td>
  73.           <td>体育</td>
  74.           <td>体育</td>
  75.         </tr>
  76.         <tr>
  77.           <td>美术</td>
  78.           <td>美术</td>
  79.           <td>美术</td>
  80.           <td>美术</td>
  81.           <td>美术</td>
  82.         </tr>
  83.         <tr>
  84.           <td>科学</td>
  85.           <td>科学</td>
  86.           <td>科学</td>
  87.           <td>科学</td>
  88.           <td>科学</td>
  89.         </tr>
  90.       </tbody>
  91.       <!-- 晚自习-->
  92.       <!-- 第4个tbody  -->
  93.       <tbody>
  94.         <tr>
  95.           <td colspan="6">课外活动</td>
  96.         </tr>
  97.       </tbody>
  98.       <tbody>
  99.         <tr>
  100.           <td rowspan="3" class="period">晚自习</td>
  101.           <td>音乐</td>
  102.           <td>音乐</td>
  103.           <td>体育</td>
  104.           <td>体育</td>
  105.           <td>体育</td>
  106.         </tr>
  107.         <tr>
  108.           <td>美术</td>
  109.           <td>美术</td>
  110.           <td>美术</td>
  111.           <td>美术</td>
  112.           <td>美术</td>
  113.         </tr>
  114.         <tr>
  115.           <td>自习</td>
  116.           <td>自习</td>
  117.           <td>自习</td>
  118.           <td>自习</td>
  119.           <td>自习</td>
  120.         </tr>
  121.       </tbody>
  122.       <!-- 表尾 -->
  123.       <tfoot>
  124.         <tr>
  125.           <td>备注:</td>
  126.           <td colspan="5">最后一节课写作业</td>
  127.         </tr>
  128.       </tfoot>
  129.     </table>
  130.   </body>
  131. </html>

2.样式的代码：

  1. <style>
  2.       /* 1. 添加表格线: 一定要添加到单元格中 td , th */
  3.       table td,
  4.       table th {
  5.         border: 1px solid #000;
  6.       }
  8.       /* 2. 折叠表格线: table */
  9.       table {
  10.         border-collapse: collapse;
  11.       }
  13.       /* 3. 对表格进行一些布局设置 */
  14.       table {
  15.         width: 90%;
  16.         /* margin-left: auto;
  17.         margin-right: auto;
  18.         margin: auto auto; */
  19.         /* 块级元素在父级中的居中 */
  20.         margin: auto;
  21.         /* 文本水平居中 */
  22.         text-align: center;
  23.       }
  25.       /* 标题 */
  26.       table caption {
  27.         font-size: 1.2em;
  28.         margin-bottom: 0.6em;
  29.       }
  31.       table thead {
  32.         background-color: lightcyan;
  33.       }
  35.       /* table tbody .period {
  36.         background-color: lightgreen;
  37.       } */
  39.       /* table tbody tr:first-of-type td:first-of-type { */
  41.       /* 第二个tbody应该去掉,作用:not 取反的伪类 */
  42.       table
  43.         tbody:not(tbody:nth-of-type(2), tbody:nth-of-type(4))
  44.         tr:first-of-type
  45.         td:first-of-type {
  46.         background-color: lightcoral;
  47.       }
  48.     </style>

运行效果图：

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