css - 使用 Flexslider 如何使控制箭头响应？

Question

调整幻灯片大小时，图像会随浏览器一起调整大小，这很棒，但是上一个/下一个控件我用图像替换了文本，它们保持静态。由于我使用 text-ident 来隐藏文本，因此我必须为要显示的箭头图像设置固定的宽度和高度。现在，我该如何调整它与幻灯片图像一起使用时的大小？

Answer 1

通过针对较小屏幕的媒体查询定位箭头图像。例如。要定位小于 480 像素的屏幕，您可以这样做:

@media only screen and (max-width: 480px) {
    .flex-direction-nav .flex-next,
    .flex-direction-nav .flex-prev {
        -webkit-background-size:50%;
        -moz-background-size:50%;
        background-size:50%;
        background-position: 50% 50%;
    }
}

通过使用 background-size 属性，您可以调整箭头图像的大小。我把它缩小了 50%。您可以根据自己的品味和满意度来调整这些值(value)观。