Question

我想为每个分辨率添加不同的图像。它适用于普通屏幕和智能手机，但我不能让它出现在大分辨率屏幕上。以下是相关的代码部分：

CSS：

/* Large screens ----------- */
@media only screen 
and (min-width : 1800px) {
html { 
  background: #000000 url(images/blackmagic.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body { 
  background-color:transparent;
  font-size: 100%;
  color:#000000;
}

h1 {
  color:#000000;
  text-transform:uppercase;
  font-family: 'Sancreek', Impact, sans-serif;
  font-size:2.5em;
}

h2 {
  font-family: 'Pathway Gothic One', Verdana, sans-serif;
  font-size:1.875em;
  color:#000000;
}

a:link {
  color:#000000;
}

a:hover {
  color:#9b0505;
}

p {
  color:#000000;
  font-family: 'Monda', Verdana, sans-serif;
  font-size:0.875em;
  text-align:justify;
}

#container {
    position:relative;
    width: 2200px;
    margin: 0 auto;
    z-index: 0;
}

#social {
    position:relative;
    margin-left: 450px;
    z-index: 0;
}

#header {
    display:none;
    position:relative;
}

#headerm {
    display:none;
    position:relative;
}

#headerl {
    position:relative;
    z-index:1;
    margin-top:-500px;
    margin-left:200px;
    width: 100%;
}

HTML：

<div id="container" class="outer">
        <div id="border" class="outer">
        <div id="header" class="inner">
            <img src="/images/header.png" id="headerimage" />
        </div>
        <div id="headerl" class="inner">
            <img src="/images/headerlg.png" id="headerimage" />
        </div>
        <div id="headerm" class="inner">
            <img src="/images/headerm.jpg" id="headerimage" />
        </div>

Answer 1

没有HTML？另外发布一个快速小提琴将使调试变得更加容易！

Answer 2

我其实只想出来了！

因为我隐藏了常规桌面/笔记本电脑分辨率的DIV而没有在其媒体查询中定义该值的最大宽度，所以它也将其隐藏在大分辨率媒体查询中。

为标准资源定义最大宽度值的简单修复

谢谢！：）

标题Div以大分辨率消失 - 媒体查询

2 个答案: