有没有办法在AJAX加载的内容上使用媒体查询?我正在使用.load()将html片段加载到网页中。这是我用CSS创建的灯箱。问题是媒体查询似乎没有对它产生任何影响。
点击电影后,会将html片段加载到div“lightbox-target”中,并在屏幕上显示一个灯箱。灯箱采用“.detail”设计。
<div class="template actionmovies">
<h1 class="name">Batman: The Dark Knight</h1>
<h2 class="imdb">9/10</h2>
<h3 class="rotten">94%</h3>
<a class="lightbox" href="#The_Dark_Knight" name="The_Dark_Knight">
<img src="images/darkknight.jpg" />
</a>
</div>
<!-- the HTML snippets load inside this div -->
<div class="lightbox-target">
</div>
CSS
.lightbox-target {
position: fixed;
background: rgba(0,0,0,0.85);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
z-index: 1000;
}
.detail {
position: absolute;
top: 100px;
height: 525px;
width: 65vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
a.lightbox-close {
display: block;
color: white;
position: absolute;
padding: 15px 20px 0 0;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i:hover {
opacity: 0.65;
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
@media all and (max-width: 1405px){
.detail {
position: absolute;
top: 100px;
height: 500px;
width: 60vw;
left: 50%;
margin-left: -34vw;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.9);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
background-color: #3D3D3D;
z-index: 1001;
padding: 0 10px 0 20px;
border-radius: 10px;
}
}