试图使 jquery 小部件响应

Question

您好，我正在尝试让这个 jquery 小部件响应。 Iv 尝试用百分比替换宽度。我最初在http://jqueryglobe.com/article/feature_list/ 上找到它，但该网站已被删除，我在我自己的网站上有它http://www.piercemcgeough.co.uk/sidetabs/

问题似乎出在选项卡上，因为它是具有宽度和高度的一组图像。

请大家帮忙。谢谢你

Answer 1

简单地缩放所有内容可能是一个挑战，因为随着图像变小，它们的高度将无法匹配显示左侧 3 个链接所需的高度。

目前的结构基本是：

#tabs    #output  .right

如何使用@media 请求并随着视点变小开始修改它？

平板电脑

#tabs  #output  
.right 

对于智能手机

#tabs  
#output  
.right

CSS 会很松散

@media（最小宽度：768px）和（最大宽度：979px）{ /* 对于平板电脑，将右 div 放在左 div 下方 */

.左，.右{ 宽度：100%； }

}

@media（最大宽度：767px）{

/* 在平板电脑下方垂直堆叠选项卡、输出和右侧 div */

.left #tabs, .left #output, .right{ 宽度：100%； }

目前 div#feature_list 的宽度也固定为 750 像素。将其更改为百分比（可能为 100%）可能很好。

您可能还需要强制输出 div 中的图像使用诸如

之类的东西进行缩放

ul#output li img{ 
width:100%;
height:auto;
}  

当然需要比这更多的微调，但我认为重要的是，如果你想让它既响应又可用，你需要开始考虑随着视点的变化而改变它的布局。您将无法简单地扩展所有内容。

祝你好运，这是网页设计的有趣时期！