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