Tag: 响应式设计

响应式设计：使用媒体查询或jQuery更改标记？: 无论是媒体查询还是jQuery，我都想更改HTML标记。我不确定什么是最好的选择。我目前的HTML标记： ….. ….. ….. ….. 对于移动纵向方向，我想在保留一个，以便将原始的2 转换为4 ，如下所示： ….. ….. ….. ….. 我该怎么做呢？我不认为单独的媒体查询无法解决这个问题。解决这个问题的有效方法是什么？

如何动态/响应更改jQuery datepicker的月数: 我问这个问题是因为我找不到另一个问题的答案。如果有，请链接到我。我有一个jQuery Datepicker，我在其上设置参数numberOfMonths：2 如果screenSize低于某个数字（例如768px），我希望它为1。我试过了： $(window).resize(function(){ if($(window).width() < 768){ $('#datepicker').datepicker({ numberOfMonths: 1 }) } } 但由于datepicker已经初始化，因此不起作用。我能做什么？

响应式导航 – 当浏览器最小化时如何使导航打开/关闭: 我正在从这个啧啧做自己的响应式导航： http ： //www.hongkiat.com/blog/responsive-web-nav/ 这是我的小提琴： http ： //jsfiddle.net/2Pqch/ 当窗口最小化并按下打开/关闭btn时，我希望能够通过单击按钮或单击导航外部来关闭它。如何添加此function？这是脚本： $(function() { var pull = $(‘.btn’); menu = $(‘nav ul’); menuHeight = menu.height(); $(pull).on(‘click’, function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(‘:hidden’)) { menu.removeAttr(‘style’); } }); });

用于折叠div的响应式设计方法: 我正在使用带有侧边栏导航菜单的CSS主题。我想添加一个按钮，让用户关闭侧边栏。我熟悉jQuery切换，显示，隐藏等等…我可以编写脚本来隐藏和显示div的方法很多，但是有一种兼容的方式来做到这一点，这将适用于大多数浏览器和手机？除了jQuery中的show hide之外还有更好的选择吗？谢谢

jQuery：根据浏览器窗口大小禁用和启用插件？: 我有以下代码根据浏览器大小添加function，但如果浏览器resize，如何删除此插件的效果？（目前它仅在以特定大小加载页面时才有效，而不是在resize时） $(document).ready(function(){ $(window).resize(function() { if ($(window).width() >= 420) { // Enable the plugin to make the tab functionality… $( “#tabs” ).tabs(); } else { // Code needed to completely disable the tab functionality?? } }); });

自适应灯箱: 我正在使用Magnific Popups ajax popup创建一个类似于Instagram或Facebook的弹出式体验（左侧图片，右侧评论等）。我如何设置整个灯箱的最大高度，并使图像在垂直居中时居中？这需要在所有浏览器中工作，并且必须具有响应性，这是棘手的。我似乎无法让它在所有浏览器中正常工作。我想我不介意jQuery解决方案，因为这是我可能需要的。图像和内容如下： .image_container, .content { width: 50%; float: left; } 并且只需使用媒体查询减少屏幕大小即可清除浮动。我已经做了一个jsfiddle来帮助理解我想要解释的内容：的jsfiddle 尝试重新调整iframe的大小以检查效果。

Div 100％页面响应高度: 我有一个搜索，但无法找到我想要实现的目标，无论如何我还不确定是否有可能有帮助的jQuery脚本。我想在我的网站上创建一个div来填充页面的整个高度（滚动下面的区域只是垂直填充的屏幕的第一个区域）。我希望这可以调整到设备的高度，所以在桌面和iPhone上，例如整个屏幕垂直高度被填充。我不确定我是否可以发布网站，但这是我在http://alexcerezo.com之后的样子

将2个单独的菜单合并为一个菜单: 我在页面上的不同位置有2个单独的菜单，如下所示： one two three Item 1 Item 2 Item 3 当设备宽度小于768时，有没有一种方法可以在全宽样式切换下拉中组合两种导航？所以他们会变成： one two three Item 1 Item 2 Item 3

$（窗口）.resize（）不起作用: 我有以下jquery代码来调整一组元素的大小，使它们与最高元素的高度相同。刷新屏幕时该function正常，但$（窗口）.resize（）似乎不起作用。 jQuery(document).ready(function($) { function equal_height(target) { var maxHeight = -1; $(target).each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $(target).each(function() { $(this).height(maxHeight); }); }; var responsive_viewport = $(window).width(); if (responsive_viewport >= 768) { equal_height(‘.cta-text’); $(window).resize(function() { equal_height(‘.cta-text’); }); } });

在响应式设计中禁用Lightbox: 我搜索过以前关于jQuery和响应式设计的SOpost，但没有找到类似的运气。我的问题是，我有一个网站，当它达到> 960px时，它会掉落所有的眼睛糖果并变得流畅。在某些页面上，我使用灯箱从缩略图中预览较大的图像。当960px被击中时，我想放弃灯箱效果。以下是我设置灯箱的方法：灯箱： some text » 有没有办法说使用jQuery> 960px禁用rel =“lightbox”？提前致谢！