em,rem,px的使用和简单手机页面布局 -

em,rem,px
em和rem是响应式布局常用单位。em是以本元素fontsize作为基准的单位。或者说em是font-size的别名或者是引用。常用于padding,margin,border-radius等的样式单位设置，使得布局和字号对应。rem是以根元素字号为基准的设置单位。常用于字体设置。em和rem理论上可以使用的范围都是一样的，但是em是当前元素字号的别名，rem是根元素字号的别名，所以导致了实际使用场合的不同。字号如果会用em 很容易会导致字号不可预测，从而导致布局混乱。rem一般用于字号设置。px 是作为border的设置单位，因为border只需要固定宽度就可以了。

实例演示
html代码

<div class="box">
<h2>胡锡进：台当局两次否认美军机飞越台湾的消息，因为他们真怕了</h2>
<p>
  台湾民进党当局的“谋独”路线已经走进死胡同。大陆方面近来几乎天天都有军事准备行动在台海地区进行，对台当局前所未有的高压态势已经形成，后者其实已成惊弓之鸟。台当局两次否认美军机飞越台湾的消息，这在过去不可思议。因为他们真怕了
</p>
</div>

css代码

/* @media：媒体查询，可以根据屏幕像素设置属性,注意and和()需要空格隔开 */
@media screen and (min-width: 600px) {
  :root {
    /* root中如果设置字号用em，就是以默认的用户代理也就是浏览器设置的16px作为基准，也就是10px,但是浏览器很多时候默认设置显示字号不小于12px以保障视觉效果，这不影响基准字号的生效 */
    font-size: 0.625em;
  }
}
@media screen and (min-width: 800px) {
  :root {
    /* root中如果设置字号用em，就是以默认的用户代理也就是浏览器设置的16px作为基准，也就是10px,但是浏览器很多时候默认设置显示字号不小于12px以保障视觉效果，这不影响基准字号的生效 */
    font-size: 0.875em;
  }
}
@media screen and (min-width: 1000px) {
  :root {
    /* root中如果设置字号用em，就是以默认的用户代理也就是浏览器设置的16px作为基准，也就是10px,但是浏览器很多时候默认设置显示字号不小于12px以保障视觉效果，这不影响基准字号的生效 */
    font-size: 1em;
  }
}
.box {
  width: 50em;
  height: 10em;
  overflow: auto;
  margin: auto;
  padding: 0.5em;
  background-color: rgb(235, 225, 225);
  border: 1px solid rgb(53, 37, 37);
  border-radius: 0.5em;
}
.box h2 {
  font-size: 1.2rem;
  line-height: 1.5em;
  margin: 0;
}
.box p {
  font-size: 1rem;
  line-height: 1.5em;
  text-indent: 2em;
}

简单手机页面布局
vw,vh写的手机简单页面布局

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>20201021作业：简单手机页面布局</title>
 <style>
   /* 样式重置 */
   * {
     margin: 0;
     padding: 0;
   }
   .header {
     height: 30vh;
     background-color: lightblue;
     text-align: center;
     line-height: 30vh;
     /* vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐，或者是表格设置。此处需要配合上面的line-height使用 */
     vertical-align: middle;
   }
   .main {
     height: 60vh;
     background-color: lightcoral;
     display: flex;
     align-items: center;
     /* flex布局下text-align不生效？或者是需要看flex方向？justify-content可以实现水平居中 */
     text-align: center;
     justify-content: center;
   }
   .footer {
     height: 10vh;
     background-color: lightgrey;
     position: relative;
   }
   .footer > p {
     /* 此处text-align不生效 */
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     /* 需要相对于自身偏移50% */
     transform: translate(-50%, -50%);
   }
   /*  */
 </style>
</head>
<body>
 <header class="header">手机页面头部</header>
 <main class="main">手机页面主体</main>
 <footer class="footer"><p>手机页面页脚</p></footer>
</body>
</html>

实际效果：
手机页面布局

以上演示几种居中方案，更多方案参考10月22日课程或者是其他网址，譬如：实现css文字垂直居中的8种方法