@media screen 主要定义在电脑屏幕、手机和平板适配问题。
例如我产品的需求是,显示宽度不超过2560px时,按钮占比占屏幕90%,超过2560px分辨率时,占比91%;这里也可以设置成固定像素,根据需求自定义设置。
/* 不超过2560px显示样式*/
@media screen and (max-width: 2560px) {
.input_title {
width: 85%;
}
}
/*超过2560px显示样式*/
@media screen and (min-width: 2560px) {
.input_title {
width: 91%;
}
}
上面代码要注意的是,如果上面的宽度范围存在交集,而屏幕宽度也在交集中,那么实际会以最后的显示样式呈现。
如:
/* 不超过30000px显示样式*/
@media screen and (max-width: 30000px) {
.input_title {
width: 85%;
}
}
/*超过0px显示样式*/
@media screen and (min-width: 0px) {
.input_title {
width: 91%;
}
}
如果是上述代码,则不超过30000px显示的样式不会被呈现,因为都被后面超过0px的显示样式替换掉了。
而且要注意的是,使用@media里面包裹的需要是根据class来修改样式,实测根据id无法修改样式。即需要使用.class名,而不是#id名;
如果还需要了解@media的其他属性,可以参考该网址。