我们在写前端页面的时候可能会遇到这样的问题：同样的一个页面在 1920x1080 的大屏幕中显示正常，但是在 1366x768 的小屏幕中却显示的非常凌乱，这是因为我们开发的页面没有做到屏幕自适应。

本文主要介绍前端页面响应式布局的几种参考方案，并对每个方案做简要阐述和实现。分别介绍Flex布局、Grid布局、UI框架自带响应式方案、媒体查询、rem布局、scale缩放等多种方案。

对CSS布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。 本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类：

新来公司的时候，同事竟然动态计算高度来实现不同分辨率的自适应，我将使用 flex 布局进行重构，实现 UI 高度的自适应。

前言： 通过前 8 篇文章基础知识的铺垫，我们也算是见识了 CSS 的“神通广大”。 这篇文章，我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列，用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。 本篇的所有知识…

基于css3写出来的一个底部导航栏效果，配合js形成了这种点击效果，如图。，然后通过一些css3的阴影等效果完成了如图的设计，文章内含有详细的注释

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