1

在我的博客上，我使用 JavaScript 插件 Unslider 来呈现一些图像。我添加了将改变幻灯片高度的媒体查询。起初，幻灯片的宽度是视口宽度的 75%。

.banner ul li {
    height: 75vw;
    width: 100vw;
}

然后当浏览器超过 720 像素时，或者在横向模式下，我将高度更改为视口高度的 90%

@media screen and (min-width: 720px),
screen and (orientation: landscape){
   .banner ul li {
       height: 90vh;
   } 
}

但是您会在我的网站上看到，您要么必须刷新页面，要么更改幻灯片才能正确应用更改。

你可以在这里看到我在说什么：http: //78.23.161.50/posts/1

附言。unslider 选项fluid设置为true

难道我做错了什么？还是 Unslider 插件没有我想要的那么流畅？我还用网站的结构制作了一个代码笔，但是在笔中尝试媒体查询和横向模式并不容易。无论如何，这里是：http ://codepen.io/anon/pen/epmPmd

4

0 回答 0