一什么是响应式设计?

1.1 是什么?

响应式⽹站设计（Responsive Web design）是⼀种⽹络⻚⾯设计布局，⻚⾯的设计与开发应当根据⽤⼾⾏为以及设备环境(系统平台、屏幕尺⼨、屏幕定向等)进⾏相应的响应和调整

描述响应式界⾯最著名的⼀句话就是“Content is like water”

⼤⽩话便是“如果将屏幕看作容器，那么内容就像⽔⼀样”

响应式⽹站常⻅特点：

同时适配PC + 平板 + ⼿机等
标签导航在接近⼿持终端设备时改变为经典的抽屉式导航
⽹站的布局会根据视⼝来调整模块的⼤⼩和位置

1.2 实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺⼨做处理，为了处理移动端，⻚⾯头部必须有 meta 声明 viewport:

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

属性对应如下:

width=device-width: 是⾃适应⼿机屏幕的尺⼨宽度
maximum-scale:是缩放⽐例的最⼤值
inital-scale:是缩放的初始化
user-scalable:是⽤⼾的可以缩放的操作

实现响应式布局的方式有如下:

媒体查询
百分比
vw/vh
rem

1.2.1 媒体查询

CSS3 中的增加了更多的媒体查询，就像 if 条件表达式⼀样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调⽤相对应的样式表

使⽤ @Media 查询，可以针对不同的媒体类型定义不同的样式，如：

@media screen and (max-width: 1920px) { ... }

当视⼝在375px - 600px之间，设置特定字体⼤⼩18px

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

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，⽐如我们为不同分辨率的屏幕，设置不同的背景图⽚

⽐如给⼩屏幕⼿机设置@2x图，为⼤屏幕⼿机设置@3x图，通过媒体查询就能很⽅便的实现

1.2.2 百分比

通过百分⽐单位 "%" 来实现响应式的效果

⽐如当浏览器的宽度或者⾼度发⽣变化时，通过百分⽐单位，可以使得浏览器中的组件的宽和⾼随着浏览器的变化⽽变化，从⽽实现响应式的效果

height、width 属性的百分⽐依托于⽗标签的宽⾼，但是其他盒⼦属性则不完全依赖⽗元素：

⼦元素的top/left和bottom/right如果设置百分⽐，则相对于直接⾮static定位(默认定位)的⽗元素的⾼度/宽度
⼦元素的padding如果设置百分⽐，不论是垂直⽅向或者是⽔平⽅向，都相对于直接⽗亲元素的width，⽽与⽗元素的height⽆关。
⼦元素的margin如果设置成百分⽐，不论是垂直⽅向还是⽔平⽅向，都相对于直接⽗元素的width
border-radius不⼀样，如果设置border-radius为百分⽐，则是相对于⾃⾝的宽度

可以看到每个属性都使⽤百分⽐，会照成布局的复杂度，所以不建议使⽤百分⽐来实现响应式

1.2.3 vw/vh

vw 表⽰相对于视图窗⼝的宽度，vh 表⽰相对于视图窗⼝⾼度。任意层级元素，在使⽤ vw 单位的情况下，1vw 都等于视图宽度的百分之⼀

与百分⽐布局很相似，但是也有区别:

参考对象不同
- vw/vh：直接相对于浏览器的可视窗口宽度和高度。1vw 等于视口宽度的1%，1vh 等于视口高度的1%。这意味着无论父元素的尺寸如何，元素都会根据用户当前浏览器窗口的尺寸来调整大小。
- 百分比：基于父元素的相应尺寸。例如，如果一个元素的宽度设置为50%，它将占据其父元素宽度的50%。这使得元素的尺寸依赖于其在DOM结构中的位置。
适用性:
- vw/vh：非常适合创建与视口大小紧密关联的布局，比如全屏背景图片、响应式设计中的分栏等，特别是在需要考虑窗口大小变化的场景。
- 百分比：适用于需要相对于父元素尺寸进行缩放的场景，适合内部布局，如页面组件内部的元素大小调整。
复杂布局:
- 在复杂的布局中，vw/vh 可以与其它单位结合使用（如 vmin, vmax），以实现更精细的响应式设计，尤其是在需要同时考虑宽度和高度的场景。
- 百分比布局在多级嵌套或复杂结构中可能需要更多的计算和调整来确保正确的布局表现。

1.2.4 rem

在以前也讲到， rem 是相对于根元素 html 的 font-size 属性，默认情况下浏览器字体⼤⼩为16px ，此时 1rem = 16px

可以利⽤前⾯提到的媒体查询，针对不同设备分辨率改变 font-size 的值，如下：

@media screen and (max-width: 414px) {
html {
font-size: 18px
}
}
@media screen and (max-width: 375px) {
html {
font-size: 16px
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px
}
}

为了更准确监听设备可视窗⼝变化，我们可以在 css 之前插⼊ script 标签，内容如下：

//动态为根元素设置字体⼤⼩
function init () {
// 获取屏幕宽度
var width = document.documentElement.clientWidth
// 设置根元素字体⼤⼩。此时为宽的10等分
document.documentElement.style.fontSize = width / 10 + 'px'
}
//⾸次加载应⽤，设置⼀次
init()
// 监听⼿机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听⼿机窗⼝变化，重新设置
window.addEventListener('resize', init)

⽆论设备可视窗⼝如何变化，始终设置 rem 为 width 的1/10，实现了百分⽐布局

除此之外，我们还可以利⽤主流 UI 框架，如： element ui 、 antd 提供的栅格布局实现响应式

1.3 总结

响应式布局优点可以看到：

⾯对不同分辨率设备灵活性强
能够快捷解决多设备显⽰适应问题缺点：
仅适⽤布局、信息、框架并不复杂的部⻔类型⽹站
兼容各种设备⼯作量⼤，效率低下
代码累赘，会出现隐藏⽆⽤的元素，加载时间加⻓
其实这是⼀种折中性质的设计解决⽅案，多⽅⾯因素影响⽽达不到最佳效果
⼀定程度上改变了⽹站原有的布局结构，会出现⽤⼾混淆的情况

ON THIS PAGE

一 什么是响应式设计?#

1.1 是什么?#

1.2 实现方式#

1.2.1 媒体查询#

1.2.2 百分比#

1.2.3 vw/vh#

1.2.4 rem#

1.3 总结#