html - 如何使用移动和平板设备的媒体查询调整图像 slider 的大小？

Question

这是一个 wordpress 网站。此处使用的图像 slider 适用于笔记本电脑和台式机，但对于手机和平板电脑，存在一些显示问题(如所附屏幕截图所示)。 http://www.potterandford.co.uk/property-details/?vebraid=26438819

我认为需要某种形式的媒体查询来定位 slider 并根据较小屏幕尺寸的需要调整其大小。我正在查看需要解决的这部分 CSS 代码。

    .flexslider {
    position: relative;
    zoom: 1;
}
.flexslider {
    width: 100%;
    margin: 0;
    padding: 0;
}
.flexslider {
    margin: 0 0 20px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    zoom: 1;
}
.flexslider {
    margin: 0;
    padding: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

但我不确定这是正确的方法吗？

@media screen and (max-width: 480px) {

.flexslider {
width: 50%;
  height: 50%;
}

}

有没有人能帮我指出正确的方向？

Answer 1

您可以使用 bootstrap 自动为您执行此操作。在这里你可以找到很多使用 Bootstrap 的 slider ...... http://bootsnipp.com/tags/carousel