媒体查询和浏览器调整大小

时间:2014-06-30 01:09:19

标签: jquery html css css3 media-queries

在我的网站上:我使用了一些@media个查询来获得不同解决方案的不同背景。我现在的问题是,如果你将窗口拖动到1080p高,但是例如只有1024,你会在顶部和底部看到白色边框。

这是正常的,因为图片是为768p高而设计的,所以不是问题。

因为我没有添加容器因为对我来说很难,所以我决定在我的背景图片上做容器。由于这个事实,我需要使用“固定”的背景,以便它与网站的响应式设计进行扩展并保持匹配。

现在我的问题是,有没有办法解决白条问题?它并不是什么大不了,因为你没有看到它们如果你的分辨率适合但我不想做例如1024x1200图片只是为了匹配高度。我很确定这样的图片在1024x768的屏幕上看起来很差。

以下是我正在使用的代码:

/* 1680x1050 ----------- */
@media only screen and (min-width : 1601px) and (max-width : 1680px) {
    /* Styles */
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 1.42857;
        background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1680x1050.jpg');
        margin: 0;
        background-repeat:no-repeat;
        -moz-background-size:cover;
        background-size:fixed;
        overflow: auto;
        background-position:center;
        background-attachment:fixed;
    }
}

0 个答案:

没有答案