如何使用针对移动设备和平板电脑设备的媒体查询来调整图像滑块的大小？

Question

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

我认为将需要某种形式的媒体查询来定位滑块并根据较小的屏幕尺寸调整其大小。 我正在查看需要解决的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

您可以使用引导程序自动为您执行此操作。 在这里您可以找到许多使用引导程序的滑块... http://bootsnipp.com/tags/carousel