我为手机创建了媒体查询
@media screen and (max-device-width: 480px), screen and (max-width: 480px) { ...css here... body {width:50%;}
但我需要此查询桌面
@media screen and (max-device-width: 750px), screen and (max-width: 750px)
如果我向
@media
桌面查询.body {width:100%;}
添加类似设置,则设置也会更改为480px。我的问题是:如何分隔
480px
css设置和750px
css设置不同 最佳答案
方法A:
先写较大宽度的查询,再写较小宽度的查询,以便覆盖它们
@media screen and (max-width: 750px){
body{
width:100%;
}
}
@media screen and (max-width: 480px){
body{
width:50%;
}
}
方法B:
还定义最小宽度:
@media screen and (max-width: 750px) and (min-width: 481px){
body{
width:100%;
}
}
@media screen and (max-width: 480px){
body{
width:50%;
}
}
注意:我认为您同时不需要
max-device-width
和max-width
关于html - 媒体查询设置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35079229/