什么是响应式设计？响应式设计的基本原理是什么？如何做？

本文链接：https://blog.csdn.net/Yb20740136/article/details/135745317

本文详细介绍了响应式网站设计的概念，包括其工作原理、实现方式（如媒体查询、百分比、vw/vh和rem单位），以及其优点（如灵活适应多种设备）和缺点（如兼容性问题和代码复杂性）。

摘要由CSDN通过智能技术生成

1. 是什么

响应式网站设计（Responsive Web design）是⼀种⽹络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺⼨、屏幕定向等)进行相应的响应和调整描述响应式界⾯最著名的⼀句话就是“Content is like water” ⼤⽩话便是“如果将屏幕看作容器，那么内容就像水⼀样” 响应式网站常见特点：

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

2. 实现方式

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

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

属性对应如下：

width=device-width: 是自适应手机屏幕的尺寸宽度

maximum-scale:是缩放比例的最⼤值

inital-scale:是缩放的初始化

user-scalable:是用户的可以缩放的操作

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

媒体查询
百分比
vw/vh
rem

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图，通过媒体查询就能很方便的实现

2.2. 百分比

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

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

height 、 width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：

子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
⼦元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 width，而与父元素的height⽆关。
子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
border-radius不⼀样，如果设置border-radius为百分比，则是相对于自身的宽度

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

2.3. vw/vh

vw 表示相对于视图窗口的宽度， vh 表示相对于视图窗口高度。任意层级元素，在使用 vw

单位的情况下， 1vw 都等于视图宽度的百分之⼀

2.4. rem

rem 是相对于根元素 html 的 font-size 属性，默认情况下浏览器字体大小为 16 px ，此时 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 提供的栅格布局实现响应式