Tag: 响应式设计

基于JavaScript的分辨率为不同设备提供不同尺寸的图像: 示例：本网站是一个很好的例子。第1步：在一个选项卡中只需加载页面查看最右列中的任何图像。你会发现它们的分辨率是638×368 第2步：打开一个新选项卡，然后…… 加载页面并打开Firebug或开发人员工具（ F12 ）转到网络（或网络）选项卡调整浏览器大小并重新加载页面再次最大化浏览器窗口查看最右列中的任何图像。你会发现它们的分辨率是356×205 显然这是一些JavaScript / jQuery技巧（+其他一些技术），因为如果你检查最右边列中的任何图像，你会看到如下代码： …如果您view-source页面view-source ，则不存在。有没有一个开源的JavaScript库，可以做这样的事情？我们称之为什么？自适应图像？我想问的简单明了的问题是……是否可以根据浏览器的视口大小或屏幕分辨率为不同设备提供不同尺寸的图像？

如何将巨型菜单的Click事件转换为hover: 我找到了一个很好的Mega菜单，需要进行一些修改，以便它可以与ASP.Net webform应用程序一起使用。除此之外，这个大型菜单适用于Click事件，这可能会使用户在时间上感到困惑，因为通常大多数用户习惯于将鼠标hover在菜单上。如何更改点击甚至hover，以便当用户将鼠标hover在菜单上时，它会显示，直到用户将鼠标移出菜单，这是下拉列表。这是一个响应式菜单设计，可能是专门为点击事件设计的。 http://jsfiddle.net/9fmfC/1/ $(function() { cbpHorizontalMenu.init(); }); 实际示例： http ： //tympanus.net/Blueprints/HorizontalDropDownMenu/ 注意：请将jsFiddle的`Result1区域的宽度增加到更大屏幕的视图，否则它将调整为小屏幕视图

jQuery Unslide – Touch不起作用: 我已经解决了这个问题，而且我只是发帖帮助别人节省一些时间。我正在使用unslider用于商业网站，我正在做出响应的网站，因此为滑块添加触摸支持的function很吸引人。不幸的是，正如作者声称的那样，它不能直接开箱即用。

使用jquery对所有设备进行垂直对齐？: 我发现在页面上垂直对齐一些元素是有问题的，而不改变其他元素布局。这个问题在移动设备上被放大了。如此多的屏幕尺寸，分辨率，肖像，风景…… var x=window.innerHeight – $(‘#myDiv’).height(); $(‘#myDiv’).css (‘margin-top’, x/2); 这适用于所有设备，移动设备和桌面设备。你认为这些方法有任何缺点吗？据我了解，今天所有设备都支持JavaScript。但是，某些设备是否可能支持JS但不支持jQuery？

我可以根据窗口大小执行javascript吗？: 我有一个响应式网站，我正在使用JavaScript来创建一个粘性侧边栏。当浏览器大小小于768px时，我还使用媒体查询从多列布局更改为单列布局。我需要弄清楚如何在单列布局中禁用粘性菜单脚本。从本质上讲，我需要像脚本语句的媒体查询。这是我用来启用脚本的代码： jQuery(‘#info’).containedStickyScroll({ duration: 0, unstick: false }); 有什么东西我可以添加到它只有触发窗口是768px宽或更宽？编辑：我正在寻找一个解决方案，如果用户动态调整窗口大小，它将起作用。

如何“欺骗”媒体查询？如何伪造窗户的宽度？: 我正在开发响应式网站，你们都知道手动缩小浏览器窗口有点舒服（此外，Firefox不允许我在一个值之后这样做）。所以我决定编写一个jQuery“插件”来缩小区域 – 或者+按钮。一旦我写了这个： $(document).ready(function() { var doResizing = function(increaseWith) { if ($(‘#xxxx’).length == 0) { $(‘body’).css(‘margin’, 0).css(‘padding’, 0); $(‘body > *’).wrapAll(”); $(‘#xxxx’).css(‘background-color’, ‘red’) .css(‘overflow’, ‘scroll’) .css(‘padding’, 0) .css(‘margin’, 0) .css(‘position’, ‘absolute’) .width(‘100%’); } $(‘#xxxx’).height(parseInt($(window).height()) + ‘px’).width(parseInt($(‘#xxxx’).width())+increaseWith + ‘px’); } $(document).keypress(function(e) { if (e.which == 45) { doResizing (-10); } if (e.which == 43) […]

根据屏幕尺寸更改bxslider上的幻灯片数量: 当我的屏幕低于430px时，我想更改bxslider上的最大幻灯片数。我可以使用下面的内容，但这似乎有点过分必须声明一切两次。有没有其他人可以想到的方式？ if ( $(window).width() < 430) { var myslider = $('#my-slider').bxSlider({ … maxSlides : 1, }); } else { var myslider = $('#my-slider').bxSlider({ … maxSlides : 4, }); }

如何从左下角到右上角创建动态对角线？: 我已经创建了一个简单的布局，其中我有三个交互的div。一个是屏幕中间的徽标，另一个是两个块，jQuery被移出屏幕。我使用CSS的skew选项来应用学位转换。我想根据屏幕应用一定程度，所以这个学位将适用于所有屏幕。可视化示例： http ： //jsfiddle.net/6a93T/1/ 现在我有这个代码： HTML： CSS： html{ overflow: hidden; } #preloader{ width: 100%; height: 100%; } #logo{ background-image: url(‘../img/logotest.png’); width: 300px; height: 300px; display: block; position: fixed; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; z-index: 1000; } #blocktop{ background-color: #fff4ed; width: 100%; height: 100%; position: absolute; top: 0px; left: […]

FlexSlider 2在窗口大小resize时resize: 我正在为Twitter Bootstrap上构建的WordPress制作一个响应主题。我在主页上使用FlexSlider幻灯片jquery插件。不幸的是，当我调整浏览器大小时，FlexSlider不会优雅地resize。当我变窄时，图像很容易被裁掉……如果我变得更宽，下一张图像的一部分可能会出现在侧面。即使我使用FlexSlider网站上的演示代码，也会发生这种情况。它甚至发生在FlexSlider演示中。但Dany Duchaine的[Energized theme] [3]设法在视口改变时很好地调整FlexSlider的大小。任何人都可以解释他是如何做到这一点，或建议我可以改善我的版本的行为？谢谢！

响应式砌体jQuery布局示例: 任何人都可以建议这个网站如何使用jQuery Masonry插件进行响应，流畅的布局？ Collective #2 特别; 浏览器resize的列数从3变为2，这是您对使用砌体的网站的期望，但有趣的是列也会resize以始终填充可用的整个宽度。我见过的大多数其他砌体网站都会在列的右侧留下间隙，因为列数会发生变化（例如http://masonry.desandro.com/ ）或者列填充整个宽度但列数保持不变（ http://masonry.desandro.com/demos/fluid.html ）。他们是否动态设置浏览器resize与CSS媒体查询相结合的列数，或者他们是否正在使用CSS3列？谢谢。