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