前言：别慌，我也刚学会这玩意儿

说白了就是想让原本在电脑上横着排的三个 stat 区块，在手机里竖着排。很多人第一反应是“哎呀，要写好多媒体查询”，其实不一定，下面给你一个最烂最直接的办法。

1、 先写桌面三列

在桌面端，我们通常这么写：

.tour-stats .stat{
    float:left;               /* 左浮动，让它们并排 */
    width:33.3%;              /* 每个占父容器的三分之一 */
}

整起来。 看起来很正规，可是真的不需要啥高级框架只要记得把父容器宽度设100%就行。

2、 手机上一列

如果你真的懒得写媒体查询，只要在HTML里加点class或者直接在CSS里写个全局覆盖：

.tour-stats .stat{
    float:none;   /* 把浮动取消 */
    width:100%;   /* 占满整行 */
}

干就完了！ 不过这样会把所有设备都变成一列，明摆着不是我们想要的。于是我们还是得靠媒体查询来控制。

3、 用媒体查询精准切换

下面这段代码是最常见也是最靠谱的：

@media {
    .tour-stats .stat{
        float:none;
        width:100%;
    }
}

解释一下：当浏览器宽度小于等于800像素时就把每个.stat改成块级元素，宽度占满父容器，实现“一列”。800这个阈值可以自行调节，一般手机竖屏在360~480之间，平板大概768，你随便选。

细节坑点

① 断点选错导致文字溢出

有些同学直接用了600px， 当你打开iPad横屏时仍然是三列，文字挤到一起看不清。解决办法：多测几款设备，把断点设在常用尺寸+一点余量，拜托大家...。

② 浮动没清除导致父容器高度塌陷

.tour-stats 本身用了float:left，如果子元素全部float后父容器高度会塌。 白嫖。 最简易办法就是在父容器后面加一个清除浮动的空div：

③ 背景图路径写错

.tour-stats .stat 里用了 background-image:url， 注意不要多了两个斜杠，否则图片加载失败。改成：，瞎扯。

.tour-stats .stat{-speed{background-image:url;}}

完整示例代码

    
速度：120km/h
    
距离：350km
    
时间：4h 20m

别怕，多试几次就熟练啦！

从桌面三列到移动端一列，只要记住两件事：

1. 用float+width搞定桌面布局。
2. @media 把float取消、宽度拉满。

有啥用呢？ 再配合一点点清除浮动和正确的图片路径，你的网站立马就能在各种设备上“自适应”。如果还有更奇葩的需求， 比如“不想写媒体查询”却又要响应式，那只能靠JS动态改class了——但这已经超出本文范围啦。

也许吧... 关键词：响应式设计、 三列布局、一列布局、CSS Float、媒体查询、移动优先、网页自适应、前端技巧、HTML5、CSS3。