响应式布局模板

最新推荐文章于 2024-12-29 10:39:40 发布

金超斌

最新推荐文章于 2024-12-29 10:39:40 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

分类专栏：布局文章标签： css

本文链接：https://blog.youkuaiyun.com/jojodeblog/article/details/107004642

布局专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一种响应式布局模板的设计思路，通过CSS媒体查询实现不同屏幕尺寸下的自适应布局，包括小屏幕、中屏幕、大屏幕及超大屏幕的宽度调整。

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

响应式布局模板

<style>
*{
  margin: 0;
  padding: 0;
}
.comtainer {
  height: 150px;
  background-color: aqua;
  margin:0 auto;
}
/* 1.小屏幕(宽度小于768px)下,宽度为100% */
@media screen and (max-width: 767px) {
  .comtainer {
    width: 100%;
  }
}
/* 2.中屏幕下(宽度大于768px)下,宽度为750px */
@media screen and (min-width: 768px) {
  .comtainer {
    width: 750px;
  }
}
/* 2.较大屏幕下(宽度大于992px)下,宽度为970px */
@media screen and (min-width: 992px) {
  .comtainer {
    width: 970px;
  }
}
/* 2.大屏幕下(宽度大于1200px)下,宽度为1170px */
@media screen and (min-width: 1200px) {
  .comtainer {
    width: 1170px;
  }
}