一、动端动端响应式布局技术
rem适配
通过动态设置根元素`font-size`实现适配，什意思移适配计算公式为：
$$1rem = \frac{ 设计稿宽度}{ 设备宽度} \times 100\%$$
例如，动端动端设计稿宽度为750px时，什意思移适配16px（基准值）对应1rem，动端动端则1px=1/16rem。什意思移适配 可使用PostCSS插件（如`postcss-pxtorem`）自动转换px为rem。动端动端
vw/vh单位
`1vw`：视口宽度的什意思移适配1%
`1vh`：视口高度的1%
适用于创建自适应宽度或高度的元素，如导航栏宽度设置为`80vw`可使其在不同设备上保持相对宽度。动端动端
媒体查询
结合`rem`和`vw`单位，什意思移适配通过媒体查询实现多断点适配：
```css
@media (max-width: 750px) {
html{ font-size: 16px;}
} @media (min-width: 751px) and 动端动端(max-width: 1024px) {
html{ font-size: 18px;}
}
```
二、字体与布局优化
弹性盒模型（Flexbox）
通过`flex-direction`、什意思移适配`flex-wrap`等属性实现灵活布局，动端动端减少手动计算。什意思移适配
CSS Grid布局
适用于复杂布局，动端动端可定义行高、列宽等属性，提升开发效率。
流式布局（百分比布局）
元素宽度设置为父容器的百分比，实现自适应缩放。
三、性能优化
资源压缩
压缩HTML、CSS、JS文件
使用WebP格式图片，或通过TinyPNG等工具优化。
懒加载与按需加载
图片使用`Intersection Observer API`实现懒加载
JavaScript模块通过Webpack的Code Splitting功能按需加载。
缓存优化
设置`Cache-Control`和`Expires`头
使用Service Worker实现离线缓存（PWA）。
四、其他注意事项
设备像素比（DPR）适配
通过`window.devicePixelRatio`调整字体大小，避免模糊：
