随着移动设备的普及，响应式设计成为了前端开发中一个必不可少的技能。通过响应式设计，我们可以让同一个网站在不同设备上都具有合适的展示效果。
而响应式设计中最关键的一个方面便是布局方式。下面我们就来介绍一下响应式设计中常用的9种布局方式。
1. 固定宽度布局
固定宽度布局是最常见的一种布局方式，它在PC端效果较好，但不利于移动端展示。它的特点是设定了一个固定的宽度，所有的页面元素都按照这个宽度进行开发。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ------------- ---- ------------------------ ------------------ ------------------- ------ ------- -------- - ------ ------ ------- - ----- - ------- ---- --------- ------ ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - -------- - ----------------- ----- - ------ --- - ----------------- ----- - --------展开代码
2. 自适应布局
自适应布局会根据设备的分辨率自动调整页面的尺寸，从而适应不同的设备。它的特点是主体内容宽度设置为百分比或使用flex布局，并且在必要时添加媒体查询进行优化。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ------------- ---- ------------------------ ------------------ ------------------- ------ ------- -------- - ------ ---- ---------- ------ ------- - ----- -------- ----- ---------- ----- - ------- ---- --------- ------ ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - -------- - ----------- ----- ----------------- ----- - ------ --- - ----------- ---- ----------------- ----- - ------ ------ --- ----------- ------ - ------ --- - ----------- ----- - - --------展开代码
3. 流式布局
流式布局又叫百分比布局，它的基本思路是通过将所有元素的宽度设置为百分比从而实现适应不同设备的效果。它也需要添加媒体查询进行优化，但相比自适应布局需要考虑更多的细节问题。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ------------- ---- ------------------------ ------------------ ------------------- ------ ------- -------- - ------ ----- - ------- ---- --------- ------ ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - --------- ------ --- - ------ ----- - -------- - ------ ---- ----------------- ----- - ------ --- - ------ ---- ----------------- ----- - ------ ------ --- ----------- ------ - --------- ------ --- - ------ ----- ------ ----- - - --------展开代码
4. 弹性布局
弹性布局又叫Flex布局，它是CSS3中专门为响应式设计设计的一种布局方式。它的特点是使用display: flex将容器设置为弹性布局，同时使用flex-grow、flex-shrink、flex-basis等属性对里面的元素进行添加、删除或者换行操作。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ------------- ---- ------------------------ ------------------ ------------------- ------ ------- -------- - -------- ----- ---------- ----- - ------- ---- --------- ------ ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - -------- - ---------- -- ----------------- ----- - ------ --- - ----------- ---- ----------------- ----- - ------ ------ --- ----------- ------ - -------- - --------------- ------- - ------ --- - ----------- ----- - - --------展开代码
5. 栅格布局
栅格布局又叫Grid布局，它是CSS3中新增加的一种布局方式。它的特点是将页面分割为若干个网格，然后在网格中定义和排布元素。栅格布局需要配合媒体查询进行优化。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ------------- ---- ------------------------ ------------------ ------------------- ------ ------- -------- - -------- ----- ---------------------- ---------- ----- --------------- ------------- ------ --------- ----- - ------- ---- --------- ------ ------ - ----------- ----------- -------- ----- - ------- ------ - ------------ ----- ----------------- ----- ------ ----- - -------- - ------------ ---- ----------------- ----- - ------ --- - ------------ ----- ----------------- ----- - ------ ------ --- ----------- ------ - -------- - ---------------------- --------- ----- --------------- ------------- ------ - ------- ---- --------- ------ ------ - ------------ ----- - -------- - --------- -- - ------- ------ - --------- -- - ------ --- - --------- -- - - --------展开代码
6. 多列布局
多列布局在PC端展示效果很好，但不利于移动端展示。它的特点是在页面中通过多个列来展示内容，同时对每一列进行自适应或者固定宽度的设置。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ---- ------------- ---- ---------------------- ---- ---------------------- ---- ---------------------- ------ ------------------ ------------------- ------ ------- -------- - ------ ------ ------- - ----- - ------- ------ ------ ------ ------ ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - ----- - --------- ------- - ------ ------ ----- - ------ ----- ------ ---- ----------------- ----- ------------- --- - ----- - ------------ -- - ----- - ------ ------ ------ ---- ----------------- ----- - ------ ------ --- ----------- ------ - ------ ------ ----- - ------ ----- ------ ----- ------------- -- ------------ -- - ----- - ------ ----- ------ ----- - - --------展开代码
7. 内容优先布局
内容优先布局的设计思路是“内容为王”，页面元素要围绕着内容进行布局，同时根据屏幕尺寸的不同实现展示效果的切换。内容优先布局需要考虑内容优先显示、内容分割、媒体查询等问题，可用来实现一些特殊的页面布局。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ---- ---------------- ---- ------------- ---- -------------------------- ------ ------------------------------- ------ ------------------------------- ------ ------ ------------------- ------ ------- -------- - ------ ------ ------- - ----- - ------- --------- ----------- ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - -------- - ------ ----- ------ ----- -------------- ----- ----------------- ----- - ----- - --------- ------- - ---------- - ------ ------ ------ ---- ----------------- ----- ------------ --- - ------ ------ --- ----------- ------ - ---------- - ------ ----- ------ ----- ------------ -- - - --------展开代码
8. 面板布局
面板布局在PC端展示效果较好，但不利于移动端展示。它的特点是将一个页面分为多个面板，每个面板包含一个标题和一个内容区域。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ---- ------------- ---- -------------- --- ---------------------------- ---- --------------------------------- ------ ---- -------------- --- ---------------------------- ---- --------------------------------- ------ ---- -------------- --- ---------------------------- ---- --------------------------------- ------ ------ ------------------- ------ ------- -------- - ------ ------ ------- - ----- - ------- ------------- --------------- ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - ----- - -------- ----- ---------- ----- - ------ - ----------- ------- -------------- ----- ----------------- ----- --------- ------- - ------------ - ------- -- -------- ----- ----------------- ----- ------ ----- - -------------- - ------- -- -------- ----- - ------ ------ --- ----------- ------ - ------ - ----------- ----- - - --------展开代码
9. Sliding Panel布局
Sliding Panel布局又叫手风琴布局，它使用了交互特效，可以展示大量内容而不显得枯燥乏味。它的特点是展示一个面板之后，其他面板会隐藏起来，同时会在用户与页面进行交互时呈现新的面板内容。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------------- ---- ------------- ---- -------------- --- ---------------------------- ---- --------------------------------- ------ ---- -------------- --- ---------------------------- ---- --------------------------------- ------ ---- -------------- --- ---------------------------- ---- --------------------------------- ------ ------ ------------------- ------ ------- -------- - ------ ------ ------- - ----- - ------- ------------- --------------- ------ - ----------- ----------- -------- ----- - ------- ------ - ----------------- ----- ------ ----- - ----- - -------- ----- - ------ - ----------- ------- ------- - ----- ----------------- ----- --------- ------- - ------------ - ------- -- -------- ----- ----------------- ----- ------ ----- ------- -------- - -------------- - ------- -- -------- ----- -------- ----- - ------- -------------- - -------- ------ - ------ ------ --- ----------- ------ - ------------ - -------- ----- - -------------- - -------- ----- - ------ - ----------- ----- ------- -- - - -------- -------- ----- ------ - ----------------------------------- -------- ------------ - ------------------------------------------ - -------- --------------- - -- --------------------------------- - ------------------------------------ - - -------------------- -- ------------------------------- ------------ -------------------- -- --------------------------------------- -------------- ---------展开代码
以上是响应式设计中常用的9种布局方式，每种布局方式在实现过程中都需要考虑到多种细节问题和优化措施，同时这些布局方式也可结合使用，以实现更加灵活的页面布局。因此在选用布局方式时，建议根据页面需求和效果进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b803ed306f20b3a656f953
