jquery - 试图使 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 (min-width: 768px) and (max-width: 979px) { /* 对于平板电脑，将右 div 放在左 div 下方 */

.left, .right{ 宽度：100%; }

}

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

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

.left #tabs, .left #output, .right{ width:100%; }

目前 div#feature_list 的宽度也被硬连线到 750px。将其更改为百分比（可能为 100%）可能很好。

您可能还需要强制输出 div 中的图像使用类似的东西进行缩放

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

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

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