标签: responsive-design

当我给图像一个百分比的宽度或高度时,它只会增长/缩小保持其纵横比,但如果我想要与另一个元素相同的效果,是否可以使用百分比将宽度和高度联系在一起？

目前,当浏览器宽度降至768px以下时,导航栏将更改为折叠模式.我想将此宽度更改为1000px,因此当浏览器低于1000px时,导航栏将更改为折叠模式.我想在不使用LESS的情况下这样做,我使用手写笔不是很少.

我的问题与此问题相同:Bootstrap 3 Navbar Collapse

但是这些问题的所有答案都解释了如何通过改变LESS变量来做到这一点.我没有处理过LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成.

谢谢!

我有一个网站(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;
}

(这是一个多部分的问题,我将尽力总结这个场景.)

我们目前正在构建一个响应式Web应用程序(新闻阅读器),允许用户在选项卡式内容之间滑动,以及在每个选项卡式内容中垂直滚动.

解决此问题的常见方法是使用一个包装器div填充浏览器视口,设置overflow为hidden或auto,然后在其中水平和/或垂直滚动​​.

这种方法很好,但有一个主要缺点:由于文档的高度与浏览器视口完全相同,因此移动浏览器不会隐藏地址栏/导航菜单.

有许多hacks和视口属性使我们能够获得更多的屏幕空间,但没有一个像minimal-ui(在iOS 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-capable元标记.

我们的Web应用程序可以访问,任何页面都可以使用本机浏览器菜单加入书签或共享.通过添加mobile-web-app-capable我们阻止用户调用这样的菜单(当它保存到主屏幕时),这会混淆和对抗用户.

minimal-ui曾经是中间地带,默认隐藏菜单但是通过点击可以访问它 - 虽然Apple可能已经删除它由于其他可访问性问题(例如用户不知道点击激活菜单的位置).

Q3.全屏体验值得一试吗？

似乎全屏API不会很快进入iOS,但即便如此,我也看不到菜单是如何保持可访问的(Android上的Chrome也是如此).

在这种情况下,也许我们应该保持原样的移动游猎,并考虑视口高度(对于iPhone 5 +,它是460 = 568 - 108,其中108包括操作系统栏,地址栏和导航菜单;对于iPhone 4或年纪大了,它是372).

很想听到一些替代方案(除了构建本机应用程序).

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);

我希望我的div能够调整其高度以始终等于其宽度.宽度是百分比.当父级的宽度减小时,框应该通过保持其宽高比来减少.

怎么做是CSS？

我想知道如何创建一个响应方块的布局.每个正方形都有垂直和水平对齐的内容.具体示例如下所示......

我正在使用CSS媒体查询处理响应式网站.

以下是设备的良好组织吗？电话,Ipad(风景和肖像),桌面和笔记本电脑,大屏幕

什么是常见的媒体查询断点值？

我打算使用以下断点:

• 320:智能手机肖像
• 481:智能手机景观
• 641或768 ???:IPad Portrait ???
• 961:iPad风景/小笔记本电脑???
• 1025:台式机和笔记本电脑
• 1281:宽屏幕

你怎么看？我有几个疑问？点.

我正在尝试使用bootstrap构建响应式布局,目前正在使用font-size定义一些标题:3em;

但是当布局缩小时,这太大了.我如何能够相应地减小文本的大小？

我正在阅读这篇标题为"你能让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 .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: …