css 响应式布局

最新推荐文章于 2021-06-11 11:12:11 发布

原创最新推荐文章于 2021-06-11 11:12:11 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用CSS媒体查询实现在不同屏幕尺寸下网页布局的自适应调整，重点讲解了在屏幕宽度小于1000px时，如何通过隐藏右侧布局并重新分配内容至主区域，以提供更佳的移动设备浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，