是什么

css响应式：页面布局及交互根据用户设备的不同进行相应的响应和调整

特性

• 同时适配pc + 平板 + 手机
• 标签导航在手持设备上变成抽屉模式
• 网站布局根据视口大小来相应调整

原理

通过媒体查询检测不同设备的屏幕尺寸做处理, 移动端必须有viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

实现方式

• 媒体查询
• rem
• vw/vh
• 百分比

媒体查询 （推荐）

格式： @media screen and 条件 ...

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

rem （推荐）

相对于html根元素的布局方式

// 动态为根元素设置字体大小
function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

vw/vh（每个元素都要设置，不推荐）

把屏幕宽高分成100等份， 类似100%比

百分比（每个元素都要设置，不推荐）

• padding/margin 百分比相对于父元素宽度
• top/left 相对于父元素高度， bottom/right相对于父元素宽度
• border-radius 相对于自身宽度