响应式布局（Responsive Layout）是指能够针对不同屏幕尺寸、分辨率做出合理布局和样式调整的一整套解决方案。经常会看到一些网站，在 PC 端放了一大堆功能，切换到移动端后整体样式大变样，功能也被阉割不全。又或者一个移动端的网站，在 PC 端点开，字体无比巨大，按钮遮住大部分页面，严重的甚至无法正常浏览。笔者之前写过一篇《基于媒体查询和 rem 的响应式布局实践》，现在看来有一些细节没有覆盖到，于是便有了本文。本文将通过几个典型的实战页面，将笔者在响应式布局上的一些经验分享给大家。

某日，同事 J 说发现一个奇怪的现象：一个列表页，在 iPhone7 竖屏上字体大小正常，横屏的时候有些字体就变的特别大。本文便是笔者对这一 “bug” 的分析过程。

媒体查询 @media

我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。

下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。