本文主要介绍 @media 查询的使【shǐ】用。通过【guò】媒体【tǐ】查询【xún】，在不同【tóng】的【de】屏幕尺寸【cùn】下，可以设置不同的样【yàng】式。以此，可以完美【měi】解决不同【tóng】屏幕适配【pèi】的问题。话不多说，先来看看效果：

CSS

@media screen and (max-width: 400px) {

    .btn {

        background-color: lightblue;

    }

}

@media screen and (min-width: 400px) and (max-width: 800px) {

    .btn {

        background-color: yellowgreen;

    }

}

@media screen and (min-width: 800px) {

    .btn {

        background-color: orangered;

    }

}

.btn {

    width: 100%;

    height: 60px;

    border: none;

    outline: none;

}

解析

将大大小【xiǎo】小的屏幕【mù】尺【chǐ】寸划分为【wéi】连续的【de】几个宽度【dù】区间，在【zài】各个【gè】宽度区间内，设置各自的元素属性。这样在不同宽度的屏【píng】幕上，媒体【tǐ】查询会根据具体【tǐ】的屏幕尺【chǐ】寸适配到对【duì】应【yīng】的区间【jiān】，来【lái】应用此区间内的元【yuán】素【sù】属性，达到适配不同屏幕的效果。

• 高度同样可以适配

• 这时想【xiǎng】想使用 bootstrap 时【shí】用到的 xs、sm、md、lg，有木有【yǒu】恍然大悟的【de】感【gǎn】觉 ^_^

这里再【zài】和大【dà】家分【fèn】享一下：https://github.com/nanzhangren/CSS_skills