怎样实现桌面到移动端的三列自适应环境响应式布局？

网站的响应式设计至关十分沉关键。一个在桌面浏览器上看起来完美的三列布局，在移动设备的较小屏幕上有可能会变得拥挤、不容简单以阅读。为了提供给一致且优质的用户体验，我们需要确保布局能够根据屏幕尺寸进行自适应环境调整。 没法说。 本教程将通过一个具体案例，演示怎样采用CSS媒体平台查询将一个基于浮动的三列布局转换为移动端友良好的单列布局。

核心思路：

HTML 结构： 我们有一个 div 容器 .tour-stats 其中包含更多个不同 div 子元素 .stat各个 .stat 代表一个统计项。

示例代码：

    
...
    
...
    
...

实现三列布局的关键CSS代码

.stat 类被赋予 float: left 和 width: 33.3%，使其并排体现。box-sizing: border-box 是一个十分沉关键的属性， 它确保了元素的 padding 和 border 不会提升元素的总较宽度，从而避免布局溢出，靠谱。。

.tour-stats .stat {
    float: left;
    width: 33.3%; /* 实现三列的关键 */
    box-sizing: border-box; 
    padding-left: 50px;
    font-size: 0.9em;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #ccc; 
    border-right: 1px dotted #ccc;
    /* 背景图标样式 */
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 25px 25px; /* 示例中各图标较大较小略有不同， 此处统一 */
}

利用媒体平台查询实现移动端一列布局

当屏幕较宽度缩较小到一定程度时上述三列布局有可能会出现文本溢出或元素换行不当的问题。为了解决当前这个问题，我们能够采用CSS媒体平台查询来定义在特定屏幕尺寸下的不同样式。

@media  {
    .tour-stats .stat {
        float: none; /* 取消浮动 */
        width: 100%; /* 占据父容器全部较宽度 */
    }
}

提到这个... 将这段媒体平台查询代码添加到您的CSS文件末尾。当浏览器窗口较宽度较小于或等于 800px 时 .tour-stats 容器内的全部 .stat 元素将不再浮动，而是各自占据一行，从而实现从三列到一列的布局转换。

完整示例代码