掌握HTML与CSS基础知识及响应式布局核心概念

HTML、CSS从零开始 | 响应式布局概念，常见的布局方案

固定布局： 基于像素的核心单元作为页面的基本单位；页面尺寸不受设备屏幕或浏览器宽度的影响，并采用单一规格。

可切换的固定布局： 同样基于像素作为页面的基本单位，在深入考量各种主流设备的实际尺寸后，并规划出多组不同宽度的设计方案；通过检测到的实际屏幕尺寸或网页边距的变化情况来自动调整并切换相应的布局方案。

弹性布局： 基于百分比的比例单位构成页面的基本结构单元，在不同设备屏幕和浏览器宽度下都能灵活应对各种不同尺寸的需求；能够充分释放空间并提供最佳视觉体验；

混合布局： 混合布局采用与弹性布局相似的方式，在不同设备屏幕及浏览器窗口尺寸下都能良好运行；其显著特点是可以充分利用可用空间并达到最佳视觉效果；值得注意的是，在这种方案中仅使用两种不同的单元类型——即像素值与百分比——来定义页面尺寸。

布局响应： 实现页面响应式设计的过程，在不同设备上呈现不同宽度的内容时主要有两种策略：一种是以pc端为基础逐步向移动端迁移；另一种是通过移动端界面作为起点向上扩展至pc端；针对不同的模式（pc优先或移动优先），在实际应用中可能会遇到一些模块布局发生变化的临界点存在**。

常见响应式布局方案

（1）模块中内容：挤压－拉（布局不变）

![图片](https://cdl.i