我必须为两个不同的屏幕 1080px 和 1000px 应用高度。
我添加了以下媒体查询:
@media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
@media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
当我切换到 1080px 时,问题仍然存在,它调用 1000px 的媒体查询。
http://ddslauncher.com/inventory-new/
提前致谢。
最佳答案
您示例中的媒体查询与您的问题相反。它们是:
@media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;;
}
}
@media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;;
}
}
(这里的问题是,当屏幕高度低于 100 像素时,两个查询都匹配,并且第二个查询应用 ass CSS“级联”向下。)
代替:
@media only screen and (max-height:1080px){
#wrapper {
width: 1884px;
height: 1080px;
float: left;
}
.filter-selection ul li
{
height:109px;
}
}
@media only screen and (max-height:1000px){
#wrapper {
width: 1884px;
height: 1000px;
float: left;
}
.filter-selection ul li
{
height:106px;
}
}
使用第二个示例应该可以解决您的问题。
编辑 对格式问题表示歉意,某些东西干扰了我的 SO 编辑。
关于html - Css 媒体查询不加载特定屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33667977/