Questions tagged «responsive-design»

响应式Web设计（RWD）是一种Web设计和开发方法，旨在基于网站的大小，平台和方向，精心设计站点，以在各种设备上提供最佳体验。

3
带有不同高度列的引导行
我目前有类似的东西： <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> 现在假设这content是具有不同高度，宽度都相同的盒子-我该如何保持相同的“基于网格的布局”，又如何使所有盒子彼此对齐，而不是完美的线条。 目前，TWBS将把下一行的下一行col-md-4放在前第三行中的最长元素下。因此，每行项目都完美对齐（整洁）-太棒了，我希望每一项都直接位于最后一个元素的下方（“砌体”布局）
4
iPhone上的简单Bootstrap页面无响应
我下载了Twitter Bootstrap示例，并使用它创建了一个简单的Rails项目。我在需要的地方复制了CSS，它显示正常。我还复制了js，一切在我的桌面上都运行良好：当我更改浏览器的大小时，它将重新组织页面。当使用大小不同的“响应式设计测试工具”时，它的效果很好。 我的问题出在我的iPhone上：它像在我的桌面上一样显示Juste。 当我尝试Bootstrap Hero Example页面（这是我开始的页面）时，它在我的iPhone上运行良好。 可能出什么问题了？我几乎没有接触过任何CSS，只是在页脚上添加了填充。 仅供参考，我更改的CSS是将我的应用程序链接到application.css以下内容： /* Application stylesheet */ @import url(bootstrap.css); @import url(bootstrap-responsive.css); /* Body */ body { padding-top: 60px; padding-bottom: 40px; } /* Footer */ footer { padding: 20px 0; }
3
我应该使用最大设备宽度还是最大宽度？
使用CSS媒体查询，您可以用于max-device-width定位设备宽度（例如iPhone或Android设备）和/或max-width定位页面宽度的。 如果使用max-device-width，则在更改桌面上浏览器窗口的大小时，CSS不会更改，因为您的桌面不会更改大小。 如果使用max-width，则在更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好的元素和菜单等。 现在已不建议定位特定的浏览器（和设备？），并​​且您应该对定位的对象有所了解。这也适用于媒体查询吗？ 为什么要针对一个目标呢？推荐哪一个？ 这是我在生产网站上使用的媒体查询的示例： @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc... */ } 我倾向于同时使用max-device-width和max-width。
8
带有LESS Magic的精美媒体查询
最好使用更少的CSS样式将CSS样式包装为不同的分辨率。 我想做类似的事情： footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 最后应该是这样的结果： footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: …
2
为什么媒体查询的顺序在CSS中很重要？
最近，我一直在设计响应速度更快的网站，并且经常使用CSS媒体查询。我注意到的一种模式实际上是定义媒体查询的顺序。我没有在每个浏览器中都进行过测试，只是在Chrome上进行了测试。有这种行为的解释吗？有时，当您的网站无法正常工作时，它会令人沮丧，并且您不确定是查询还是编写查询的顺序。 这是一个例子： 的HTML <body> <div class="one"><h1>Welcome to my website</h1></div> <div class="two"><a href="#">Contact us</a></div> </body> CSS： body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than …
5
是否可以通过浏览器开发人员工具查看浏览器正在使用哪个srcset图像
我一直在尝试srcset通过浏览器开发人员工具查看我的浏览器正在使用哪个图像，但是除了使用“网络”标签来查看它无法获取的图像之外，我一直在尝试。 使用网络选项卡通常会很好，但是有时我注意到它会获取两个不同大小的图像版本，如果一个断点位于600，另一个断点位于900，并且浏览器当前宽度为750px，则会发生这种情况。 （我已经在Chrome和FireFox上都尝试过此操作，在某些情况下，Chrome可能会拉下这两个图像，但是FireFox似乎只会拉下一个） 我想知道的原因是我是否对它缩放两个图像srcset剂量感兴趣，并在缩放浏览器窗口时自动在它们之间交换？这不能通过检查元素来判断，它只是给出了元素的原始html img，而不是img srcset其使用的实际选项。
24
Bootstrap 3模式启动并导致页面暂时向左移动/浏览器滚动条问题
我正在使用Bootstrap 3.1.0的网站上工作。 您会注意到，当模式窗口打开时，浏览器滚动条会消失片刻，然后返回。关闭它时，它的作用相同。 我如何才能使其打开和关闭而没有浏览器滚动条交互。我曾在堆栈上看到有人遇到问题的帖子，但找不到针对我的问题的答案，因此，如果有人提出了此请求，并且有人知道此请求并希望将我链接到该请求，我将不胜感激它。发布前，我已经搜索了大约2个小时。
8
仅使用CSS交换DIV位置
我正在尝试将两个divs位置交换为响应式设计（该网站的外观根据浏览器的宽度/适用于移动设备而有所不同）。 现在我有这样的事情： <div id="first_div"></div> <div id="second_div"></div> 但是是否有可能second_div仅使用CSS来交换其放置位置，使其看起来像是第一个？HTML保持不变。我已经尝试过使用浮点数和其他东西，但是它似乎并没有达到我想要的方式。我不想使用绝对定位，因为divs的高度总是在变化。有什么解决办法，还是没有办法做到这一点？
6
带有Flexbox的CSS正方形网格
我正在尝试创建一个自适应的正方形网格。正方形应调整大小以适合视口的宽度。更改视口高度时，正方形不应调整大小。 我了解了如何调整每个正方形的宽度，但是当视口宽度发生变化时，我不知道如何使元素变为正方形以及如何缩放其高度。 在小提琴下面的示例中，七个正方形应始终水平放置，并且应按正方形缩放。我不在乎有多少行可见。 在这里提琴http://jsfiddle.net/gonyhvz8/11/ <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> </div> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> </div> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div …
7
如果容器div较小，如何将子div扩展到100％屏幕宽度？
整个页面的父元素是居中div，最大宽度限制为960px。页面上的所有其他元素都是该父div的子元素。简化的结构如下： <div id="parent"> <div id="something"></div> <div id="wide-div"></div> <div id="something-else"></div> </div> 尽管父div的宽度不应超过960px，但我在此处称为“宽div”的div应该会填满屏幕的整个宽度。它包含一个比960px宽的图像，并且应该为整个屏幕宽度设置不同的背景色。 我不能轻易地将该div从父div中移出，它会弄乱我的布局的其他部分，并使整个事情变得很尴尬。 我找到了一些技巧来实现这一目标，但似乎没有一个能满足我的要求。我的设计具有响应能力，或者至少我正在尝试实现这一目标。我发现的技巧依赖于了解所涉及元素的大小，在我的情况下这不是固定的。 有没有办法在响应式布局中将内部div扩展到整个屏幕宽度？
29
是否可以为Facebook的社交插件设置可变宽度？
我正在围绕“响应式设计”概念开发站点，但是facebook社交插件的宽度是静态的，调整大小时会“破坏”布局。 使用媒体查询，我将插件设置为隐藏在低分辨率浏览器（移动设备等）上。但是，在台式机浏览器上，当将浏览器窗口的大小调整为较小，但又不至于隐藏插件时，它们就会脱离布局。 可以为Facebook社交插件设置可变宽度吗？
7
响应图像srcset不起作用
我一直在尝试使用以下HTML实现新的srcset方法来响应图像 <img class="swapImages" srcset="assets/images/content/large.jpg 1200w, assets/images/content/medium.jpg 800w, assets/images/content/small.jpg 400w" sizes="100vw" src="assets/images/content/small.jpg" alt="responsive image"> 我使用的是chrome 40，我得到的只是最大的图像，调整了浏览器的大小，清除缓存没有任何作用。 我读了一些我必须进行polyfill的地方，所以我使用了picturefill插件，尽管chrome应该支持它。 我为此放了一个演示页：http : //www.darrencousins.com/lab/resp-img-srcset/ 我在做什么错/不明白？ 任何帮助深表感谢。
4
jQuery：如何动态检测窗口宽度？
我的页面上有一个滚动元素（使用jScrollPane jQuery插件）。我要完成的是一种通过检测浏览器窗口的宽度来关闭滚动窗口的方法。我正在做一个响应式布局，并且我希望在浏览器小于某个宽度时关闭此滚动功能。我可以在刷新页面时使其工作，但是当我调整浏览器窗口的大小时，宽度值不会即时更新。 现在，如果我从一个宽为1000像素的窗口开始，然后将其尺寸调整为350像素，则滚动功能仍然存在。我希望滚动功能在浏览器宽度达到440px时立即关闭。 这是我到目前为止的代码。 var windowsize = $(window).width(); $(window).resize(function() { var windowsize = $(window).width(); }); if (windowsize > 440) { //if the window is greater than 440px wide then turn on jScrollPane.. $('#pane1').jScrollPane({ scrollbarWidth:15, scrollbarMargin:52 }); }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.