PC端和移动端的开发方式大致分为：单独式开发、响应式开发。顾名思义，单独式指PC端和移动端分别开发；响应式指PC端和移动端都能同时使用的。
根据开发需求，可以灵活选择不同的布局技术，这就是【混合布局】。
单独式开发（移动端）
一、流式布局（百分比布局）
高度固定，但宽度设置为百分比，这样页面会随着宽度的变化，内容【宽度也相应变化】。
二、flex弹性布局-----【混合布局】
父元素设置display：flex；子元素设置flex：n；这里的n代表子元素占父元素宽的n份，常用于 等比/等分 布局。
控制主轴方向：flex-direction ；
单行对齐： 主轴 flex-content 、 侧轴 align-items ；
多行对齐： 主轴 flex-wrap 、 侧轴 align-content ；
和流式布局一样高度不变，【宽度变化】。
三、rem适配布局-----【混合布局】
rem是 css 的长度单位，它是相对于 <html> 元素的 font-size 的相对值。假设 html { font-size: 20px; }，那么 1rem 就等于 20px。rem会随着设备的大小变化而相应【变化 高度、宽度】，解决了流式布局和flex布局不能变化高度的问题。
1.rem+媒体查询技术
rem结合 媒体查询技术 可以实现元素大小动态变化。
2.rem+flexible.js
flexible.js （淘宝团队研发的技术）将页面的一行分成 10份 ，可以快速布局，实现元素大小动态变化。
响应式布局（移动端+PC端）
媒体查询技术为核心（判断设备尺寸，引用不同的css样式），配合bootstrap，以父级元素（.container）为布局容器，配合子元素实现大小动态变化。【宽高都变化】
传统布局
float浮动，position定位 + 盒模型