目录
响应式布局与移动端布局
前言
准备工作
响应式布局——媒体查询
概念
媒体类型
区间类型
语法规则
引入方式
移动端布局
尺寸单位
设计稿与相对单位
结束语
响应式布局与移动端布局
前言
进阶部分还是会继续讲述CSS3有关的内容和一些相对来说脱离基础的内容，难度上可能略有提升，建议在过完基础部分之后再学习。
本章节学习如何让页面适应不同尺寸的屏幕，主要包含响应式布局和移动端布局的有关内容。
叠甲：不是专业的科普博主，仅供参考。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
响应式布局——媒体查询
想让页面自动适应屏幕的大小，实现不同尺寸下的效果适配，这个时候就需要使用到媒体查询的功能。
概念
媒体查询，又叫媒介查询，即通过媒体类型进行查询。
它允许开发者为不同的设备和环境定制样式。通过使用媒体类型，开发者可以创建更加适应性和响应式的网页设计，从而提供更好的用户体验。
媒体类型
CSS2中，主要是通过不同媒体类型进行样式的选择。
常见的媒体类型有：
| 类型 | 含义 |
|---|---|
| screen | 屏幕 |
| 打印设备 | |
| speech | 语音合成器等屏幕阅读器 |
| handheld | 手持设备类型（区分智能和其他小型设备） |
| all | 所有媒体类型（常用） |
区间类型
CSS3为我们提供了几种常见的设置尺寸的方式，按照最大、最小尺寸设置的方式如下:
| 属性 | 含义 |
|---|---|
| min-width | 宽度不低于该数值的屏幕 |
| max-width | 宽度不超过该数值的屏幕 |
注意，如果要写多种尺寸的屏幕，应当分别写出对应的样式，并按照顺序排列。
如果采用的是min-width尺寸，则应当先写小屏幕的代码，后写大屏幕的代码，采用max-width则反之，防止同级规则前后覆盖的问题。
语法规则
媒体查询的CSS语法如下:
@media 设备 and (区间) and (区间)... {
/* 指定尺寸下的CSS样式代码 */
}比如，我们想引入一个宽度不低于800px的设备，使用媒体查询的语法如下：
@media all and (min-width: 800px) {
/* 指定尺寸下的CSS样式代码 */
}对于部分网页，还可能涉及到横屏效果和竖屏效果的样式差异，我们可以在区间中利用orientation属性来设置两种类型的网页。
orientation有下面两种常见的属性值：
| 属性值 | 含义 |
|---|---|
| portrait | 竖屏 |
| landspace | 横屏 |
orientation也常常用于大屏、特殊宽屏的应用。
引入方式
媒体查询的代码也可以写在CSS外部样式表中，并通过link标签引入。
比如，我们需要引入一个宽度不超过1500px的屏幕设备的CSS样式表，可以使用下面的link语句引入：
<link rel="stylesheet" media="screen(max-width: 1500px)" href="w1500.css">移动端布局
在制作移动端（手机端）的网页时，我们知道不同品牌、型号的手机屏幕的尺寸是完全不同的。
如果我们要为每一种屏幕都设置单独的一套CSS样式进行匹配，工作量将会十分巨大。
这时，我们就需要一套使用相对单位的代码，能够根据屏幕的尺寸自适应调整网页的尺寸，避免因为尺寸问题导致的网页超出屏幕显示不全等问题。
尺寸单位
在这里，我们需要引入两个新的单位：
| 单位 | 含义 |
|---|---|
| vw | view-width 视图宽度 |
| vh | view-height 视图高度 |
对应的是显示的区域宽度，相当于百分比。100vw和100vh对应铺满整个浏览器窗口或者设备屏幕。
设计稿与相对单位
通常来说，我们的移动端设计稿的宽度都为750px，高度因内容而异。
如果我们将单位设置为px，则屏幕的尺寸将被固定在750px，导致屏幕自适应的问题。
所以我们需要使用相对单位rem和px产生联系，让设计稿里的1px对应屏幕上此时的1px。
这里会用到我们CSS3的calc()函数实时计算当前屏幕宽度与设计稿的宽度的关系：
html{
font-size: calc(100vw / 750);
}不要忘记1rem就是根元素的字体大小哈。
使用rem的好处是相对单位可以实时调节，等比例自适应，屏幕尺寸变化时内容的显示格式不会受到影响，缩放内容将没有效果。
使用px绝对单位就不能自适应了，在屏幕大小变化或者缩放时整个页面尺寸会变化，甚至发生格式上的错误。
结束语
本期的内容到这里就结束了，主要是响应式布局和移动端布局两方面的内容，这些在之后的面试中都是非常重要的。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——浓度骤降的【H2O2】
