网页响应式布局方法

响应式相关css属性

显示或隐藏属性

position: fixed;固定定位：元素脱离文档流，始终固定在视口的"右上角"，不随页面滚动移动（元素位置相对于浏览器视口，而非父容器）

right: -101%; 初始位置：顶部贴视口（top:0），右侧偏移-101%（完全隐藏在视口外屏幕边缘右侧）

top: -101%; 初始位置：顶部偏移-101%（完全隐藏在视口外屏幕顶层上方）

height: 100vh; 尺寸：高度100vh（视口高度的100%，铺满整个屏幕高度）

weight:100vw; 尺寸：宽度100vw（视口宽度的100%，铺满整个屏幕宽度）

display: none;隐藏元素

display: block;显示元素（独占一行）

display: inline-block;显示元素（独占一块）

z-index: 10000;始终显示在顶部

font-size: 62.5%; 设置根元素字体大小为 62.5%（父容器需为html）

1rem=10px; .5rem=5px

css 复制代码

html {
  font-size: 62.5%;/*  设置根元素字体大小为 62.5%（浏览器默认字体大小是16px，62.5%即10px） */
  overflow-x: hidden;  /*  隐藏页面横向溢出的内容，禁止出现横向滚动条 */
  /* 这样设置后，1rem 就等于 10px（rem 是相对于根元素 html 的字体大小的单位） */
}

clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);通过坐标点定义可视区域；polygon(x1 y1, x2 y2, x3 y3, x4 y4) 是 "多边形裁剪"，按顺序连接四个坐标点
- 「左上角 (0,0) → 右上角 (100%,0) → 右上角 (100%,0) → 左上角 (0,0)」，实际是一条 "水平线"，导航栏高度被裁剪为 0，完全隐藏
- 「左上角 (0,0) → 右上角 (100%,0) → 右下角 (100%,100%) → 左下角 (0,100%)」，是完整的矩形，导航栏完全显示（配合激活类active使用）
clip-path: inset(20% 20% 20% 20% round 1.8rem); 表示对一个矩形裁剪，inset(左上角，右上角，左下角，右下角，圆角)，四个函数值都相同时，为从中心裁剪。

伸缩布局属性

display: flex;flex-wrap: wrap;自动换行，子元素宽度超出时自动换行，适配小屏幕
flex: 1 1 40rem;

flex-grow	1	当父容器（.slide）有剩余宽度时，文字区会占满剩余宽度（和图片区平分 / 按比例分配）
flex-shrink	1	当父容器宽度不足时，文字区会自动缩小，避免溢出
flex-basis	40rem	文字区的基础宽度为 40rem（400px），屏幕足够宽时先按这个宽度显示，再分配剩余空间

display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); 网格布局，卡片式响应式布局核心

repeat()	(5,1fr)	网格列的重复次数；每列的宽度；1fr指的是平均分配
auto-fit	自适应列数	自动适配列数：浏览器根据容器宽度，自动计算能放下多少列，剩余空间自动分配
minmax()	(30rem, 1fr)	每列的尺寸规则：最小宽度 30rem；列宽不会小于这个值；最大宽度 1fr：列宽最大为 "均分剩余空间"，多列时宽度相等；

grid-row：控制网格项占据的行
- grid-row: 开始行线 / 结束行线;
grid-column：控制网格项占据的列
- grid-column: 开始列线 / 结束列线;

响应式MEDIA查询

小型电脑991px

css 复制代码

@media (max-width: 991px) {
  html {
    font-size: 55%;/*修改根元素的字体大小*/
  }
  .home #slide-prev {
    top: 95%;/*调整top,right值使得原来隐藏在屏幕边缘的元素显示出来*/
  }
  .home #slide-prev {
    left: auto; /*调整top,right值使得原来隐藏在屏幕边缘的元素显示出来*/   
    right: 8rem;
  }
}

平板768px

css 复制代码

@media (max-width: 768px) {
    html {
    font-size: 50%;
  }
  #search-btn {
    display: inline-block;
  }
  .header .search-form {
    position: absolute;
    top: -101%;/*调整top值，隐藏元素， 初始位置：顶部偏移-101%，完全隐藏在.header上方 */
    left: 0;
    right: 0;
    width: 100%; /* 左右贴.header边缘，宽度100%，铺满整个头部 */

  }
  .header .search-form.active {
    top: 99%;/* 设置元素被激活时的状态，顶部偏移99%（接近100%），刚好贴在.header底部  width: 100%;宽度100%*/
  }
}

手机450px

css 复制代码

@media (max-width: 450px) {
  html {
    font-size: 50%;/*修改根元素的字体大小*/
  }
}

响应式相关JS属性

Active类选择器

toggle方法：如果元素没有 active 类 → 自动添加；如果元素已有 active 类 → 自动移除
- navbar.classList.toggle('active');
remove方法 ：移除元素中的某个类
- navbar.classList.remove('active');
用JS设置的style属性的优先级是最高的，原先CSS属性都已失效
- 使用定义类的方式，用元素.play.classList.toggle("hidden")方法

其他语法

HTML标签

header标签：表示「页面 / 区块的头部」，包含标题、logo、导航、搜索框等头部相关内容，是 "有明确功能定位的容器"；
- 搜索引擎 / 屏幕阅读器能识别 "这是页面头部"，优先解析其中的核心信息（如 logo、主标题）
from标签：表示「表单容器」，专门承载表单控件（input/button/select 等），自带 "数据提交" 的功能语义；
- 浏览器会识别为 "表单区域"，支持默认的表单行为（如按回车提交）；
section标签：表示「页面的一个独立区块 / 章节」，包含 "有主题的内容集合"，是 "内容分组的语义化容器"；
- 搜索引擎识别为 "独立内容区块"，提升内容结构化权重；
nav标签：表示「导航区域」，专门承载页面 / 区块的导航链接，是 "导航功能的专属容器"；
- 搜索引擎识别为 "导航链接区"，优先抓取其中的核心链接；
video标签：表示 [视频标签]
- video标签不能设置伪元素
- video标签不能在里面添加除了source和track之外的标签
- video默认显示的是inline-block，所以视频底部会有一些缝隙，这是行内元素特有的，而设置了block就没有了

CSS属性

box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.5);遮罩效果：通过超大的box-shadow覆盖整个视口，形成半透明黑色遮罩层；100vw 扩散半径设为「视口宽度的 100%」（覆盖整个屏幕宽度）
*::selection: background-color: #fff; 专门用于设置「用户选中页面文字 / 内容时」的样式，
outline: none;移除元素获得焦点时的默认外轮廓线（比如输入框点击后的蓝色边框）
text-decoration: none;移除链接（a 标签）的默认下划线
text-transform: capitalize;将所有文本转换为首字母大写的格式
html::-webkit-scrollbar: w**i**dth: 1rem;选中整个滚动条，width 控制垂直滚动条的宽度（如果是横向滚动条，用 height 控制高度）
html::-webkit-scrollbar-track:background:#fff; 滚动条的轨道（滑块滑动的背景区域）
html::-webkit-scrollbar-thumb: background: #244d4d;滚动条的滑块（鼠标可以拖动的部分）
outline: 0.2rem solid #ffffff; border为内边距，outline为内边距
mask-image: radial-gradient(circle 8rem at 100% 100%,transparent 100%,black 100%); ：轮播图边缘的模糊白色背景
子元素通过定位实现在父容器的中心位置（易错点）
- 父元素添加相对定位，子元素添加绝对定位
- 子元素的top和left都设置为50%(此时子元素的左上角会显示在父容器的中心，但是子元素的中心是偏向右下的)
- 所以需要transform: translate(-50%,-50%);来偏移自身宽高的50%来弥补
  复制代码
```
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/*偏移自身宽高的50%来弥补中心在右下角的问题*/
```