媒体查询实现响应式布局
本文主要【yào】介绍 @media 查询的使【shǐ】用【yòng】。通过媒体查询【xún】，在不【bú】同的【de】屏幕尺寸下，可以设置【zhì】不同的样【yàng】式。以【yǐ】此，可以完美解决不同屏幕【mù】适配的问题。话不多说，先来看【kàn】看效果：
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;
}
解析
将大【dà】大小小的屏幕尺寸【cùn】划分【fèn】为连续【xù】的【de】几个宽度区间，在各【gè】个宽度区间内，设置各自的元素属【shǔ】性。这【zhè】样在不同【tóng】宽【kuān】度的屏幕上，媒体查询会【huì】根据具【jù】体的屏幕尺寸适配到对应【yīng】的区间，来应【yīng】用此区间内的元素属【shǔ】性，达到【dào】适【shì】配不同屏幕的效果。
高度同样可以适配
这【zhè】时想想使【shǐ】用 bootstrap 时用到的 xs、sm、md、lg，有木有【yǒu】恍【huǎng】然大悟的感觉 ^_^
这【zhè】里再和大家分享【xiǎng】一下：https://github.com/nanzhangren/CSS_skills