css - 学习响应式布局中遇到的问题

问题描述

问 题

不理解把多个css样式给一个html代码是什么意思？
html代码：

<div class="col-md-3 col-mx-3">
            <div class="back"></div>
        </div>
        <div class="col-md-6 col-mx-6">
            <div class="back"></div>
        </div>
        <div class="col-md-3 col-mx-3">
            <div class="back"></div>
        </div>

css代码：
@media (min-width: 768px){/最小值大于这个宽度，执行这个样式/

            .col-md-1{
            width: 8.33333333%;
           }
            .col-md-2{
            width: 16.66666666%;
           }
            .col-md-3{
            width: 25%;
           }
            .col-md-4{
            width: 33.3333333333%;
           }
            .col-md-5{
            width: 41.666666666%;
           }
            .col-md-6{
            width: 50%;
           }
        }
        @media (max-width: 768px){
            .col-mx-1{
            width: 8.33333333%;
            }
            .col-mx-2{
            width: 16.66666666%;
            }
            .col-mx-3{
            width: 25%;
            }
            .col-mx-4{
            width: 333333333333%;
            }
            .col-mx-5{
            width: 41.666666666%;
            }
            .col-mx-6{
            width: 50%;
            }
            .col-mx-8{
            width: 66.66666666%;
            }
            .col-mx-12{
            width: 100%;
            }
            .row:before, .row:after {
                display: table;
                content: '';
                clear: both;
            }
        }

解决方案

什么叫CSS ==> 层叠样式表

层叠就是不同的属性会合并，相同的属性，后面的会覆盖前面的。

为啥添加两个class，利用media查询，进行特定条件下的样式覆盖。对于bootstrap，以移动有先，啥叫移动优先，就是小屏幕优先，所以。。。。。

这篇关于css - 学习响应式布局中遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！