Tag: 响应式设计

即使在窗口重新resize后，也可以将绝对定位DIV居中（用于响应式设计）: 即使在窗口重新resize和所有主要设备（响应式设计）之后，我想在屏幕中间保留一个绝对定位的DIV #box 。响应式#box使用css3媒体查询完成，而left使用jquery计算。但我可以将我的盒子正好放在中间位置，在小窗口的窗口重新调整尺寸上，左右边距不等。 is am athe centre?’ css： #box { position:absolute; background:red; width:900px; height:400px; } @media only screen and (min-width: 979px) { #box{width:760px;background:yellow;} } @media only screen and (min-width: 768px) and (max-width: 979px) { #box{width:760px;background:pink;} } @media only screen and (min-width: 480px) and (max-width: 767px) { #box{width:460px;background:black;} } @media only screen and (min-width: […]

根据屏幕大小替换HTML: 我试图以小屏幕尺寸替换HTML内容，然后在窗口再次变大时替换它。我的代码可以使用，但如何删除更改呢？这是我到目前为止的代码： $(window).resize(function() { if (window.innerWidth < 480) { $('.LatestNews').replaceWith('News Link’); } else if (window.innerWidth > 480) { // Change back to original .LatestNews } }).resize(); 谢谢。

确定浮动元素中的换行位置: 假设我在容器有六个元素。这六个div中的每一个都是一个正方形，并且CSS样式为float: left applied。默认情况下，当它们到达容器的边缘时，它们将换行。现在，我的问题是，使用Javascript，是否可以确定包装在哪个元素？如果它们在页面上显示如下： ___ ___ | 1 | | 2 | —– —– ___ ___ | 3 | | 4 | —– —– 我试图确定包裹发生在第二个和第三个元素之间。如果你想知道我是否已经失去了理智，我试图这样做的原因是如果点击其中一个框，我希望能够通过一些花哨的shQueryy jQuery下拉行之间的信息区域。 ___ ___ | * | | ! | —– —– | Someinfo| ___ ___ | * | | * | —– —– […]

响应式Google图表的最佳做法: 我在我的网站上有这个谷歌图表。现在这是一个Scatter图表，但我想要所有类型的图表的解决方案。例如，如果您使用700像素宽的窗口加载网站，则图表尺寸不响应：图表太宽。以下是我正在使用的代码。你能帮助我吗？谢谢 HTML： CSS： #chart_div { width:100%; height:20%; } JS： var options = { title: ‘Weight of pro surfer vs. Volume of his pro model’, hAxis: {title: ‘Weight (kg)’, minValue: 53, maxValue: 100}, //55 vAxis: {title: ‘Volume (l)’}, //, minValue: 20, maxValue: 40}, //20 legend: ‘none’, width: ‘100%’, height: […]

在响应式导航中添加更多列表按钮: 我有一个让我们说12个项目的导航，当分辨率变小时，项目会在新行中下降。当项目不再适合导航时，我需要在导航的右侧放置一个“更多”下拉按钮。并把那个不适合下拉的项目。如果你不理解我，下面有图片。但问题是导航项的宽度并不总是相同，因为导航项是从REST api生成的。我试着制作jQuery脚本来计算项目宽度并将它们添加到导航中。这是我创建的脚本，我匆忙制作，所以它非常糟糕。我需要帮助如何正确计算项目和导航宽度，并计算何时添加项目到导航或从导航中删除项目。如果你没有得到它，这是图像： http ： //img.hr/aagV /* * Here we check how many items can we put on the navigation bar * If item doesn’t fit we clone it on the more dropdown button */ function removeMany() { var i = $items.length – 1; if (itemsWidth > navWidth) […]

基于容器宽度动态调整文本大小: 我正在开发一个响应式设计，我有一些显示标签，我希望在浏览器窗口的宽度减小时缩小。初始设置，基于960px的宽度：正文字体大小设置为14px h3标签的字体大小为40px 包含div的宽度为230px 所以这就是我为javascript / jQuery做的事情： $(window).resize(function(){ var containerSize = $(‘.container’).width(); var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */ var textRatio = containerSize * textPercentage; var textEms = textRatio / 14; $(‘.container h3’).css(fontSize,textEms+”em”); }); 我的javscript技能显然非常有限，所以我希望你能帮我把这一切都搞得一团糟。我认为$(window).resize函数是使用的错误事件，因为文本应该在页面加载时自动resize，而不仅仅是在窗口大小调整上。在此先感谢您的帮助！注意：我不希望文本延伸到容器的边缘，这就是我没有使用FitText.js或BigText.js的原因。

响应式全屏CarouFredSel幻灯片: 这是一个自我问答。我一直在用令人惊叹的CarouFredSel滑块插件开发很长一段时间了。每次我必须制作一个需要在宽度和高度上响应的全屏幻灯片时，我忘了怎么做。所以我为我和所有其他与之斗争的人做了这个问答。所以，这是一个问题：你如何制作全屏，反应灵敏的CarouFredSel幻灯片？

基于父div使Bootstrap响应的最佳方法？: 我需要一个引导程序中的容器来响应父div而不是媒体查询。如果没有，我无法找到最好的方法，特别是如果可能的话，不使用javascript。目前，在resize时，我计算是否.span* divs应该是100％宽度（如果父div最终低于640px）或尊重columning CSS。这是一个jsfiddle。使用.somecontainer上的CSS， .somecontainer .span*的内部布局应该像移动一样 – 所以每列应该全宽，如果你将CSS改为640px以上，例如，它会重新布局到列布局。有任何想法吗？目前使用的代码与此类似（不太理想） $(document).ready(function(){ $(‘.somecontainer’).on(‘resize’,function(){ if ($(‘.somecontainer’).width() < 640) { $('.somecontainer').addClass('m'); } else { $('.somecontainer').removeClass('m'); }); }); http://jsfiddle.net/tsdexter/ArqUR/1/ 谢谢，托马斯

如何在响应式设计中调用不同的jquery操作: 我正在将我的项目转换为响应式设计。什么是最方便和通用的解决方案，你建议为每个断点实现不同的jQuery块？我想将所有脚本保存在一个文件中，导致http请求数量增加。这就是我发现的： breakpoint.js – >在CSS和JS中定义所有断点加倍 http://responsejs.com/ – >在body data-attr中定义断点 OnMediaQuery – >为断点定义人类可读的名称（恕我直言更好，因为你没有绑定到像素）我的问题是，它们都定义了回调，但在这些情况下我不知道如何绑定或取消任何jQuery事件监听器。我有： $(‘#selector’).click( function() { alert(‘selector clicked’); }); 但这应该只在最大宽度为320px时才会发生。在屏幕尺寸以上，点击应返回false或执行任何其他操作目前，我还不知道如何做到这一点。

垂直中心响应图像: 我想知道是否有一种简单的方法来垂直居中响应图像。请参考以下jsFiddle： http ： //jsfiddle.net/persianturtle/yawTb/1/ 基本HTML：基本CSS： .mobile-title-size { position: absolute; top: 2.5%; left: 6%; width: 70%; max-width: 300px; } 这是使用平板电脑和桌面视口上显示的相同图像的移动标题。由于图像已经被加载了，我希望使用相同的图像，将其调整为较小并垂直对齐，以便我可以将一个图像用于所有视口。问题：在浏览器resize时，图像会变小，但不会在中心垂直对齐。目标：尽管在此示例中宽度严重重叠，但这不是我网站上的问题。目标只是在浏览器resize时垂直居中图像。我可以使用javascript / jQuery解决方案，但当然，首选简单的CSS。任何帮助是极大的赞赏！