移动适配：屏幕在需要像素以上就停止放大,并且内容居中显示

/* 1. body 超过540px 则宽度固定为540 ,且水平居中 */
body {
  max-width: 540px;
  margin: 0 auto;
  background-color: #f0f0f0;
}

/* 2. 通过媒体查询， 当屏幕宽度超过540px ,
   把html 文字大小固定为54px ,一定要加上 !important  */
@media (min-width: 540px) {
  html {
    font-size: 54px !important;
  }

  3. 因为底部是固定定位，所以单独设置，当屏幕超过540px 
    固定其宽度，并居中

  解释： .toolbar  为你需要居中的块


  .toolbar {
    width: 540px;
    /* 移动父元素的一半 */
    left: 50%;
    /* 自加的一半 */
    transform: translateX(-50%);
  }
}