标签: responsive-design

当流体宽度(基于百分比)容器太小而无法显示整个图像时,如何使图像保持居中？

如何将图像置于其容器中心

这意味着当容器太小时,它应该显示图像的中间而不是侧面.

我是前端开发和基金会的新手.

我试图<div class="main-header">成为一个响应缩小的全屏图像.

谁能告诉我我做错了什么？它正在缩放,但没有显示完整的图像.我也想让<div class="large-6 large-offset-6 columns">它坐在移动设备上面 - 这可能吗？

HTML:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}

Bootstrap有一些很好的.visible-*(例如.visible-lg)类实用程序,用于根据屏幕大小选择要显示或隐藏的内容.

使用这些类时,它会display: block !important;在正确的屏幕大小时应用样式.

但有时,我想将它用于显示inline或显示的某些元素inline-block.

我怎么能干净地覆盖一些引导规则才能做出选择？或者它应该是bootstrap中的功能请求？

编辑

好像我不是唯一一个对这个问题感到疑惑的人.这是github问题.

谢谢你的最新答案!

我想使页脚的宽度与浏览器无关.

对于Mozilla,我想使用的值-moz-available,当用户使用Opera时,CSS应该从中获取值-webkit-fill-available.

如何在CSS3中执行此操作？

我试着这样做:

width: -moz-available, -webkit-fill-available;

这不会产生预期的结果.

我在这里使用Twitter Bootstrap构建了一个响应式站点:http://zarin.me/cce/

响应式设计在iPad和iPhone上运行良好,但是当我将设备从纵向翻转到横向时,网站会放大而不是适应屏幕(捏屏幕工作).

我错过了什么？这是一个视口问题吗？这是我在我的唯一视口代码:

<meta content="width=device-width, initial-scale=1.0" name="viewport">

提前致谢!

我正在尝试在我的设计中添加Google地图,这应该是响应式的.我使用了与图像相同的代码......但由于某种原因,地图的iframe会根据我没有选择的尺寸进行调整.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300">    </iframe>?

和CSS

iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}

或者你可以在这里查看它并在这里摆弄它:http: //jsfiddle.net/corinne/pKUzU/ (如果你切掉CSS,你会看到我的意思).

我的问题是如何使这个iframe /地图响应而不会失去它想要的高度？

我创建了一些响应式网站,但对响应式网站开发来说却是新手.在我的CSS中,99%的值都是ems或百分比.我正在使用媒体查询(max-width和max-device-width)来进行布局更改.我没有包含一个视口元标记,它在iOS,我测试的许多Android手机和平板电脑以及所有桌面浏览器上运行良好.

添加元标记会破坏我的网站.我做错了什么,或者做了些什么事情以便我不需要包含它？我很困惑为什么它似乎是一种最佳实践,因为它打破了我的东西.

我错过了什么吗？

桌面,平板电脑,笔记本电脑/笔记本电脑,Iphone和智能手机等所有设备最重要的媒体查询宽度是多少？这些设备有任何标准宽度吗？

<div class="parent">
   <div class="child1">
     question
   </div>
  <div class="child2">
  somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

CSS

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;

}

与上面的代码的主要问题是,child3溢出,但如果我给一个max-width在child2它不会溢出parent.在我使用的两种情况下word-wrap: break-word;

您可以在这里查看代码 http://jsfiddle.net/vbj10x4k/

我需要知道它为什么会发生以及如何在不使用max-width/width固定像素值的情况下解决它.我需要它才能做出回应.

首先,我道歉.我知道这里有针对这个问题的各种解决方案,但对于我的生活,我无法让他们中的任何一个工作.

对于一个响应式网站,我试图将一个h1集中在一个div中.

水平居中不是问题,但我在垂直居中时遇到了问题.据推测,我做错了什么或误解了我在这里找到的解释(或两者兼而有之).

因为我可能会以错误的方式解释早期的解决方案,有人可以解释一下我必须添加到下面的代码中以使h1垂直居中吗？

(为了使这个问题与尽可能多的人相关,我已经删除了我以前所有尝试这样做的代码.)

CSS:

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML:

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>