试图使jquery小部件响应

Question

您好我正试图让这个jquery小部件响应。我尝试用百分比替换宽度。我最初在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（min-width：768px）和（max-width：979px）{ / *表示平板电脑，右下方div div * /

.left，.right { 宽度：100％; }

}

@media（max-width：767px）{

平板电脑堆栈标签下面的

/ *，输出和右边垂直* /

.left #tabs，.left #output，.right { 宽度：100％; }

此时div＃feature_list的宽度硬连线到750px。将此值改为百分比（可能是100％）可能会很好。

您可能还需要强制输出div中的图像按比例缩放

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

肯定会有比这更需要的微调，但我认为重要的是，如果你想使这个响应和可用，你需要开始考虑在视点改变时改变它的布局。你不会简单地扩展所有东西。

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