css 响应式布局

html{
  font-size: calc(100vw/50);
}

.robot-index-head,
.robot-index-main
.robot-index-footer
{
  height: 4rem;
  width: 100%;
}
.robot-index-head
{
  line-height: 4rem;
}
.robot-index-head img
{
  width: 25rem;
}
.robot-index-main{
  height: calc(100vh - 7rem);
  overflow: hidden;
}
.robot-index-footer{
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  position: fixed;
  left: 0;
  bottom: 0;
}
.robot-main{
  height: 100%;
  width: 70%;
  overflow: hidden;
}
.robot-right{
  height: 100%;
  width: 30%;
  overflow: hidden;
}
.robot-main-right{
    display: none;
}
@media only screen and (max-width: 1000px) {
  /* 竖屏模式 */
  .robot-right{
    display: none;
  }
  .robot-main{
    width: 100%;
  }
  .robot-main-right{
    display: block;
  }
}

主要就是 @media only screen and (max-width: 1000px)这块，就是在最大宽度1000px以下都生效的样式，隐藏右侧布局，同时可以显示右侧的内容到robot-main-right，