Question

我正在尝试创建响应式布局并使用CSS媒体查询使其适合各种屏幕分辨率。但是当我为下面提到的分辨率创建媒体查询时：

/*1280 x 1024*/
/*1280 x 960*/
/*1280 x 800*/
/*1280 x 768*/
/*1280 x 720*/

宽度相同，broswer选择最后一个“720px”css

这是我的代码：

    /*1280 x 1024*/
 @media screen and (max-width: 1280px) and (max-height: 1024px) and (min-height: 961px) {
    .resolution {
        color:#0000ff;
    }
}
/*1280 x 960*/
 @media screen and (max-width: 1280px) and (max-height: 960px) and (min-height: 801px) {
    .resolution {
        color:#00ff72;
    }
}
/*1280 x 800*/
 @media screen and (max-width: 1280px) and (max-height: 800px) and (min-height: 769px) {
    .resolution {
        color:#1e00ff;
    }
}
/*1280 x 768*/
 @media screen and (max-width: 1280px) and (max-height: 768px) and (min-height: 721px) {
    .resolution {
        color:#ff00f0;
    }
}
/*1280 x 720*/
 @media screen and (max-width: 1280px) and (max-height: 720px) and (min-height:300px) {
    .resolution {
        color:#fffc00;
    }
}

<div class="resolution">Lorem Ipsum</div>

请建议!!!

Answer 1

我将您的代码放入一个新的HTML文件中，并以不同的分辨率进行测试。它似乎工作正常。这是一个截屏视频： http://screencast.com/t/LdtVNqDDP

Here's指向我在屏幕录像中使用的浏览器插件的链接。

CSS Media Queries具有不同的1280分辨率问题

1 个答案: