概念

所谓对响应式布局方案的理解，众说纷纭，核心点就是同一套代码在不同尺度屏幕下的布局呈现方式的不同

• 社区中有很多人分享，并列出了多种实现响应式布局的方案，比如【 rem，百分比%，vw,vh】 ，以及最关键的 【媒体查询】等等。其实针对这些布局方案的理解，绝大多数人还是存在一定的误区。从我个人严格意义上的理解中，上述的方案 只有 媒体查询 才是真正的响应式布局 ，而其他几种方案比如【 rem，百分比%，vw，vh】，准确点说，应该是属于 自适应布局的概念范围内；自适应布局 和响应式布局其实在本质上还是有区别的。简述的说就是 响应式布局 真正意义上做到了 一套代码资源在不同尺度屏幕下的布局呈现方式的不同， 而自适应布局，会根据用户使用的设备屏幕尺寸不同，呈现出不同方式的展示效果，主要是控制页面显示的比例，并不会在同一套代码中去动态切换布局方式。同时这需要开发人员 提前针对不同平台开发出多套同业务但不同布局的代码，然后动态判断用户的使用设备环境，从而决定呈现相应的页面。

讲述了 响应式布局 的概念理解，那么接下来，就来聊聊 响应式布局的最佳解决方案 【媒体查询】

媒体查询

媒体类型

类型	描述
all	检测所有设备。
screen	检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等。【最常用】
print	检测打印机

媒体特性

类型	描述
width	检测视口宽度
max-width	检测视口最大宽度
min-width	检测视口最小宽度
height	检测视口高度
max-height	检测视口最大高度
min-height	检测视口最小高度
device-width	检测设备屏幕的宽度
max-device-width	检测设备屏幕的最大宽度
min-device-width	检测设备屏幕的最小宽度
orientation	检测视口的旋转方向（是否横屏） portrait ：视口处于纵向，即高度大于等于宽度 landscape ：视口处于横向，即宽度大于高度

媒体运算符

类型	含义
and	并且
, 或 or	或
not	否定
only	肯定

实际开发中，将会对不同尺寸屏幕做一个划分

使用代码示例

@media screen and (max-width:768px) {
/*CSS-Code;*/
}
@media screen and (min-width:768px) and (max-width:1200px) {
/*CSS-Code;*/
}

由于涉及到多套样式相互切换，如果写在一起，就会特别的冗余，所以，做响应式布局，我们一般 使用媒体查询搭配外部样式表一起使用。

例如：

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————