首页
  产品
  关于我们

.navbar {
  display: flex;
  justify-content: space-around; /* 均匀分布 */
  align-items: center; /* 垂直居中 */
  background-color: #f0f0f0;
  padding: 10px;
}

  
页头
  
  
主要内容
  
  

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左侧200px，右侧自适应 */
  grid-template-rows: auto 1fr auto; /* header, main/nav/aside, footer */
  grid-template-areas:
    "header header"
    "nav    main"
    "nav    aside" /* 这里假设aside也在nav下面 */
    "footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

  
...
  
...


  
...
  
...


  
...

  @@##@@
  


  

    
文章标题
    
文章内容...
    

      
评论区
      
    
  
  

/* 默认样式，通常是针对移动设备的（Mobile First） */
body {
  font-size: 16px;
  padding: 10px;
}

/* 当屏幕宽度大于等于 768px 时应用 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
  .container {
    max-width: 960px;
    margin: 0 auto; /* 居中 */
  }
}

/* 当屏幕宽度大于等于 1200px 时应用 */
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
  .container {
    max-width: 1140px;
  }
}

img, video, iframe {
  max-width: 100%; /* 图片最大宽度为其父容器的100% */
  height: auto;    /* 高度自动调整，保持图片比例 */
  display: block;  /* 避免图片底部出现多余空间 */
}

/* 手机端默认一列布局 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 一列 */
  gap: 15px;
}

/* 平板端两列布局 */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 两列 */
  }
}

/* 桌面端三列布局 */
@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 三列 */
  }
}