🍎 实现响应式设计的相关
相关问题：
- 什么是响应式设计？
- 响应式设计的基本原理？
- 如何实现响应式网页的设计。
# 概念
响应式网页设计是一种网络页面设计布局。页面的设计与开发根据 用户的行为以及设备环境（系统平台、屏幕尺寸、屏幕方向等）进行相应的响应和调整。
响应式网站设计的特点：
- 同时适配 PC 端和移动端的设备；
- 标签导航在 PC 端与移动端有响应的样式；
- 网络的布局根据视口的大小调整模块的大小和位置；
# 实现方式
响应式网页设计的原理是 通过媒体查询检测不同设备的屏幕尺寸。
所以为了适配移动端的设备，页面的头部必须有 meta 声明 viewport ：
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalble=no"
对应的
content属性有：
width=device-width：自适应设备的宽度；initial-scale：缩放比例的初始化大小；maximum-scale：缩放比例的最大大小；user-scaleble=no：是否允许用户调整页面的缩放比例；
实现响应式布局的方式：
- 媒体查询；
- CSS 单位：百分比 /
vw&vh/rem
# 媒体查询
CSS3 中添加了更多的媒体查询。像 if 条件表达式，可以设置不同类型的媒体条件，并且根据不同的媒体条件，给出响应符合的媒体调用的样式表。
通过媒体查询可以给不同分辨率的设备编写不同的样式实现响应式的布局。还可以根据不同分辨率的设备分配大小不同的资源。为小屏幕手机设置 @2x 图，为大屏幕手机设置 @3x 图。
🌰 例子：
@media screen and (max-width: 1920px) { ... }
针对屏幕最大宽度为
1920px（意味着1920px宽度大小以内的屏幕） 的屏幕设置样式。
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
2
3
4
5
当视口的宽度在
375px与600px之间，字体的大小为18px。
# 百分比 %
使用 CSS 单位中的百分比 % 单位实现响应式的效果。例如，当浏览器的宽度和高度随着浏览器的可视窗口生改变时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的可视窗口的变化发生变化，从而达到响应式的效果。
但是要注意：
height/width属性的百分比依托于（相对于）父元素标签，其他的元素则不依赖于父元素。- 对于定位属性：子元素的
top/left/right/bottom如果设置百分比的单位数值，那么相对于直接非static定位的父元素的高度。 - 对于
padding内边距：不论是垂直方向还是水平方向，对相对于直接父元素的width宽度，而与父元素的height无关。 - 对于
margin外边距：不论是垂直方向还是水平方向，都相对于直接父元素的width宽度。 border-radius：相对于自身的宽度。常用场景，画一个圆或者实现圆形头像框。
可以看到如果每个属性都使用百分比，会有不同的「相对」规则，会形成复杂的布局，所以不建议使用百分比的单位实现响应式。
# vw & vh
vw 表示相对于视图窗口的宽度， vh 表示相对于视图窗口高度。 任意层级元素，在使用 vw 单位的情况下， 1vw 都等于视图宽度的百分之一。
# rem
rem 是相对于根元素的字体尺寸 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
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
🌰 例子 / 为了更加准确监听可视窗口的大小的变化，加入 JavaScript 脚本调整字体尺寸：
<script>
function init() {
// 获取屏幕宽度
let width = document.documentElement.clientWidth
// 设置根元素的字体大小。设置为宽度的十等分
document.documentElement.style.fontSize = width / 10 + 'px'
}
// 首次加载页面时，运行一次
init()
// 为屏幕的变化大小事件添加事件监听
window.addEventListener('orientationonchange', init)
// 监听手机窗口的变化
window.addEventListener('resize', init)
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 利用 CSS UI 框架
主流的 CSS UI 框架，例如 Bootstrap、 ElementUI、TailwindCSS 都有提供栅格布局实现响应式。
# 总结
响应式的设计通常会从以下的方面思考：
- 使用弹性盒子包裹元素（包括图片、表格、视频）和媒体查询技术；
- 使用百分比布局创建流式布局的弹性 UI，同时使用媒体查询限制元素的尺寸和内容变更范围；
- 使用相对单位使得内容自适应调整；
- 选择断点，针对不同的断点实现不同布局和内容的展示。
响应式布局的优点：
- 面对不同的分辨率设备的灵活性强；
- 能够快捷解决多设备显示的是配问题；
响应式布局的缺点：
- 仅适用于布局信息、框架并不复杂的部门类型网站；
- 兼容各种设备的工作量大，效率低；
- 代码累赘，会出现隐藏无用的元素，加载时间长。
- 一方面改变了网站原有的布局。