使用媒体查询

Question

我试图将我的页面调整到屏幕尺寸。我想实现媒体查询以获得屏幕大小。 这是我的代码：

<div class="tabeditor">

</div>

CSS

.tabeditor {
    height: 1000px;
    background-color: red;
}
@media screen and (max-height: 768px) {
.tabeditor {
    height: 100px;
    background-color: blue;
}

Fiddle

它在IE和Chrome上分别以1920x1080或1024x768分辨率显示蓝框。 好像我不明白它是如何工作的，有人可以解释一下吗？

由于