Questions tagged «responsive-design»

我很难理解字体缩放。 目前，我有这个网站与身体font-size的100％。不过是100％这似乎可以计算出16个像素。 我给人的印象是100％会以某种方式引用浏览器窗口的大小，但是显然不是因为将窗口缩小到移动宽度还是全尺寸的宽屏桌面总是16像素。 如何使网站上的文本相对于其容器而言？我尝试使用em，但这也无法扩展。 我的理由是，当你调整，这东西像我的菜单中就被压扁，所以我需要降低px font-size的.menuItem相对其它元素的容器的宽度之中。（例如，在大型桌面上的菜单中，22px效果很好。向下移动至数位板宽度16px比较合适。） 我知道我可以添加断点，但是我确实希望文本能够缩放并具有额外的断点，否则，每控制100像素的宽度，我将得到数百个断点来控制文本。

1185 css  responsive-design  font-size 

我想创建一个div可以随窗口宽度变化而改变其宽度/高度的。 是否有任何CSS3规则可以允许高度根据宽度而改变，同时保持其长宽比？ 我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。

1058 html  css  responsive-design  aspect-ratio 

是什么之间的差异col-lg-*，col-md-*并col-sm-*在Twitter的引导？

544 css  twitter-bootstrap  twitter-bootstrap-3  responsive-design  bootstrap-4 

我对twitter引导网格中的各种选项以及它们如何组合在一起感到困惑。 首先，您可以有一个普通的fixed container或一个container-fluid。 然后，可以包含一个普通row行或一个流体行row-fluid。也就是说，您可以使用带有固定排的固定容器，或者带有固定排的容器流体...？ 然后，最重要的是，您可以包括“响应式”媒体查询，也可以不包括。 我对这些东西如何相互作用感到困惑。但是，让我们从一个明显的例子开始。 在示例页面本身上，提供了作为固定网格和流体网格的示例的内容 但是，在我的浏览器中，在该示例页面本身上-两个网格的行为相同。也许因为示例页面使用了可选的响应式媒体查询？在这两个网格示例中，如果我开始逐渐缩小浏览器窗口的范围，则网格元素不会逐渐变窄-一旦达到某个（响应）边界宽度，它们将捕捉为较小的尺寸，然后又变为更远的边界宽度。但是普通的“固定”示例和“流体”示例在这里的行为完全相同-那么到底有什么区别呢？

399 twitter-bootstrap  responsive-design  fluid-layout  fixed-width 

我已经使用Zurb Foundation 3网格创建了一个站点。每个页面都有一个大的h1： body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> 运行代码段隐藏结果展开摘要 当我将浏览器调整为移动大小时，大字体不会调整，并导致浏览器包含水平滚动条以适应大文本。 我注意到在Zurb Foundation 3 Typography 示例页面上，标题在压缩和扩展时适应浏览器。 我是否真的缺少明显的东西？我该如何实现？

341 css  responsive-design  font-size  zurb-foundation  em 

每个响应式网站开发教程都建议使用display:noneCSS属性来隐藏内容，以免在移动浏览器中加载内容，从而使网站加载速度更快。是真的吗 难道display:none不加载图像或它仍然加载在手机浏览器的内容？有什么方法可以防止在移动浏览器上加载不必要的内容？

336 css  responsive-design 

从引导程序看，它们似乎支持折叠用于较小屏幕的菜单栏项。页面上的其他项目是否也有类似内容？ 例如，我有一个右舷的右舷药丸。在小屏幕上，这会导致问题。我希望至少将其放入类似的点击显示更多下拉菜单中。 在现有的Bootstrap框架中可能吗？

298 html  css  twitter-bootstrap  responsive-design 

我希望按钮能占据列的整个宽度，但是有困难... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> 如何使按钮与列一样宽？

276 css  twitter-bootstrap  html  responsive-design 

假设我有一个直方图脚本，可构建960 500 svg图形。如何使它响应，以便调整图形的宽度和高度是动态的？ <script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < m; j++) …

224 javascript  responsive-design  d3.js 

当前，当浏览器宽度降至768px以下时，导航栏将变为折叠模式。我想将此宽度更改为1000px，所以当浏览器低于1000px时，导航栏将变为折叠模式。我想在不使用LESS的情况下执行此操作，而是在使用手写笔而不是LESS。 我的问题与此问题相同：Bootstrap 3 Navbar折叠 但是，这些问题中的所有答案都说明了如何通过更改LESS变量来做到这一点。我还没有处理过LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法来完成此操作。 谢谢！

205 css  twitter-bootstrap  responsive-design  navbar  collapse 

我有一个网站（g-floors.eu），并且我想使背景（在CSS中，我为内容定义了bg图像）也具有响应性。不幸的是，除了我可以想到的一件事之外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。 基本上，我想实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话 链接：g-floors.eu 我到目前为止的代码（内容部分） #content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; }

195 css  responsive-design  background-image  image-resizing 

（这是一个多部分的问题，我将尽力总结一下该场景。） 我们目前正在构建一个响应式Web应用程序（新闻阅读器），允许用户在选项卡式内容之间滑动，以及在每个选项卡式内容内垂直滚动。 解决该问题的常用方法是使用一个包装器div来填充浏览器视口，将其设置overflow为hidden或auto，然后在其中进行水平和/或垂直滚动​​。 这种方法很棒，但有一个主要缺点：由于文档的高度与浏览器的视口完全相同，因此移动浏览器不会隐藏地址栏/导航菜单。 有许多hack和视口属性可以使我们获得更多的屏幕空间，但效果却不如minimal-uiiOS 7.1中引入的效果。 昨天有消息称，iOS 8 beta4已从minimal-uiMobile Safari中删除（请参阅iOS 8发行说明中的 Webkit部分），这使我们感到奇怪： Q1。是否仍然可以在Mobile Safari中隐藏地址栏？ 据我们所知，iOS 7 不再对这种window.scrollTo入侵做出响应，这表明我们必须使用较小的屏幕空间，除非我们采用垂直布局或使用mobile-web-app-capable。 Q2。是否仍有可能获得类似的软全屏体验？ 通过软全屏，我的意思是不使用mobile-web-app-capablemeta标签。 我们的网络应用程序构建为易于访问，可以使用本机浏览器菜单将任何页面添加为书签或共享。通过添加，mobile-web-app-capable我们防止用户调用这样的菜单（当菜单保存到主屏幕时），这会使用户感到困惑和反感。 minimal-ui过去是中间地带，默认情况下隐藏菜单，但可通过轻按使其保持可访问状态 -尽管Apple可能由于其他可访问性问题（例如用户不知道在何处激活菜单）而将其删除。 Q3。全屏体验值得麻烦吗？ 似乎全屏API不会很快进入iOS，但是即使这样，我也看不到菜单如何保持可访问性（Android上的Chrome也是一样）。 在这种情况下，也许我们应该只保留移动浏览器，并考虑视口高度（对于iPhone 5+，它是460 = 568-108，其中108包括OS栏，地址栏和导航菜单；对于iPhone 4或更老的是372）。 很想听听其他选择（除了构建本机应用程序之外）。

191 javascript  ios  css  responsive-design  mobile-safari 

IE8是否不支持以下CSS媒体查询： @import url("desktop.css") screen and (min-width: 768px); 如果没有，替代的写作方式是什么？在Firefox中也可以正常工作。 以下代码有任何问题吗？ @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

178 html  css  responsive-design  internet-explorer-8  media-queries 

Наэтотвопросестьответына 堆栈溢出нарусском：Сеткаизадаптивных（响应）квадратов 我想知道如何创建具有响应正方形的布局。每个正方形将具有垂直和水平对齐的内容。具体示例显示在下面...

170 html  css  responsive-design  grid-layout  aspect-ratio 

我正在阅读这篇题为“您能否使iFrame响应式吗？”的stackoverflow帖子，并且其中一项评论/答案将我引向了jfiddle。 但是，当我尝试实现HTML和CSS以满足自己的需求时，却没有相同的结果/成功。我创建了自己的JS小提琴，因此我可以向您展示它对我来说是如何工作的。我确定它与我使用的iFrame类型有关（例如，产品图片可能也需要响应）。 我主要担心的是，当我的博客读者在iPhone上访问我的博客时，我不希望所有内容都是x宽度（我所有内容的宽度均为100％），然后iFrame行为不佳，并且是唯一更宽的元素（因此会粘住）超越所有其他内容-如果有意义的话？） 无论如何，有人知道为什么它不起作用吗？谢谢。 这是MY JSFIDDLE的HTML和CSS（如果您不想单击链接）： <div class="wrapper"> <div class="h_iframe"> <!-- a transparent image is preferable --> <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" /> <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe> </div> </div> 这是随附的CSS： .wrapper { width: 100%; height: 100%; margin: 0 auto; background: #ffffff; } .h_iframe { position: relative; } .h_iframe …

144 css  iframe  responsive-design