如何调整网站显示效果以适配不同窗口尺寸？

• 响应式网页设计（RWD）是目前通用性最强的实现方案，核心通过三类基础技术组合完成适配：
  • 媒体查询（Media Query）：通过@media规则匹配视口宽度、高度、设备类型等参数，按需加载对应CSS样式，可针对手机、平板、桌面端分别定义布局、字号、元素间距等规则
  • 相对单位流式布局：用%、vw/vh、fr等相对单位替代固定px单位定义元素尺寸，让元素可以根据父容器或视口大小自动调整占比
  • 弹性/网格布局：使用display: flex或display: grid实现灵活的元素排列规则，自动处理容器内元素的换行、伸缩、剩余空间分配逻辑
• 常规适配补充优化点：
  • 在HTML头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，确保移动设备以实际物理宽度作为视口基准，不会自动缩放页面
  • 给图片、视频等多媒体资源设置max-width: 100%规则，避免资源尺寸超出容器范围溢出
  • 针对不同DPI的屏幕提供多规格静态资源，避免高清屏出现内容模糊问题
• 若不同设备的业务逻辑和页面结构差异极大，也可选择服务端动态渲染对应设备的页面模板、或是前端根据设备类型跳转独立子站的方案，不过这类方案的维护成本远高于响应式设计，非必要场景不推荐使用

内容的提问来源于stack exchange，提问作者ines20