【问题标题】:Trying to make a jquery widget responsive试图使 jquery 小部件响应
【发布时间】:2026-02-02 04:15:02
【问题描述】:

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

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

请大家帮忙。谢谢你

【问题讨论】:

  • 您还可以将图像缩放到其父级的 100%。当然可能会出现一些剪裁(父级的溢出应该隐藏在一个固定的高度)。
  • 问题不包括您遇到的问题的任何具体细节或responsive 对您的小部件及其组件的含义的标准

标签: jquery css responsive-design


【解决方案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;
}  

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

祝你好运,这是网页设计的有趣时期!

【讨论】: