简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽…

sass/scss 和less 都是在css 的基础上增加了一些更高级的功能，这些功能的扩展使我们更简单高效的开发项目。

Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。 Grid 是二维布局系统，通常用于整个页面的规划。 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局

未经授权，禁止转载！（仅限已授权的微信公众号转载） Grid（网格）布局是最强大的 CSS 布局方案，它用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰…

Grid 布局又称网格布局，与 Flex 布局有一定的相似性，但grid布局相较flex布局可以看为是二维布局，是目前最强大的布局方案。本文通过诸多示例详细阐述了gird布局的具体使用方法与应用场景。

你真正了解 flex 的特性吗？Grid 布局是否体验过？本文带你全面全面掌握，可以收藏作为手册自查。

一、flex弹性的概念： 弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：