Question

所以，我需要为这个滑块做的事情在不同的分辨率下正确调整大小，因为我得到了响应。

我试过那个滑块

HTML

MappedByteBuffer

Css

<div id="slider">
                <div id="controleplay">
                    <div id="autoplay"><img src="imagens/pausa.png" width="48" height="48"/></div>
                    <div id="button-next"><img src="imagens/seta_dir.png" width="48" height="48"/></div>
                </div>
                <div class="sp" ><img src="imagens/banners/w6-resultados.jpg" width="" height="auto" />
                    <h2><span>  Chegamos e damos boas vindas <br> ao nosso site! </span></h2></div>
                <div class="sp"><a href="noticia.html"><img src="imagens/banners/w6-sistema.jpg" width="" height="auto" />
                    <h2><span>  Solutions  </span></h2></a></div>
                <div class="sp"><a href="noticia.html"><img src="imagens/banners/w6-slogan.jpg" width="" height="auto" /></a></div>
                <div class="sp" ><img src="imagens/banners/w6-design.jpg" width="" height="auto"/>
                    <h2><span> Sofisticação presente <br> em nossos produtos e serviços </span></h2></div> 
        </div>

这里＆gt; http://jsfiddle.net/3yv59qf3/3/

Answer 1

在这里查看@media for css：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

您可以检测设备窗口大小，并让您的应用程序的CSS响应。如果它是1200px或更高，你知道它是一个桌面，例如可以添加样式，并将它拿走992px的平板电脑等。

以下是移动设备尺寸@ media的示例：

@media (max-width: 768px) {
    .jumbotron {
        margin-top: 91px;
    }
    .container {
        margin-top: 101px;
    }
}

当窗口小于768px时，“jumbotron”类将获得91px的上限，等等。

以下是如何捕获中间大小的示例，因此如果屏幕位于平板电脑和桌面大小之间（例如，如果有人在桌面上使用较小的浏览器窗口大小）：

@media (min-width: 769px) and (max-width: 1199px) {
    .jumbotron {
        margin-top: 51px;
    }
    .container {
        margin-top: 61px;
    }
}

当窗口大小大于786px但小于1199px（1200用于桌面）时，“jumbotron”只有51px的上边距。这应该可以帮助你到达你想去的地方。

转动这个滑块真的很敏感

1 个答案: