如何以均匀的间距水平分布包含图像的 div？

Question

我网站的标题是一些文字和一个徽标。使用的字体不是标准的，所以文本是基于图像的。

我希望网站的元素随着浏览器窗口的大小而变化。我相信这叫做流体设计？

所以我希望标题中的文本和徽标可以缩放并水平均匀分布。有 5 个字母，然后是徽标，然后是 5 个字母。再来一个曲线球，我希望徽标始终位于页面的中心。

我环顾四周，似乎有多种方法可以做到这一点。基于 html 和 css 不断发展的功能，它们都有自己的警告，我猜 css 比 html 更多。

那么截至 2014 年 6 月 8 日，最好的方法是什么？ =P 显然我希望它在尽可能多的浏览器中工作。

Answer 1

基本上有两种方法可以根据屏幕大小更改内容：

1。使用百分比

如果您有一些元素应该在用户更改屏幕尺寸时更改其尺寸，我建议使用百分比。

.content {
   width: 90%;
   height: 50%;
}

在这个例子中，.content 类总是有 50% 的高度和 90% 的宽度——只要用户改变屏幕尺寸，它就会改变它的像素大小。您可以使用它创建一个非常灵活的布局。

2。 @媒体查询

如果你想改变的不仅仅是尺寸，你有一个静态布局或者想创建一个类似移动版本的东西，css有一个@media-query：

@media (min-width: 600px) and (max-width: 1000px) {
    .content {
         background-color: red;
    }
}

如果屏幕宽度在 600px 和 1000px 之间，.content 的背景颜色将变为红色。只需将您希望标头进行的更改放入这样的@media-query 中，它就会完美运行。

你会在css-tricks.com找到一个非常好的@media-queries 新手教程

Answer 2

好的，我希望这就是您对将徽标/类型置于页面中心的描述的意思。这是我为解决方案制作的jsfiddle。

这是代码

HTML：

<header>
  <div id="wrap">
      <div id="container">
      <div id="logo"><img src="http://mattfrey.ca/img/springfarm/sf-preview2.jpg" alt="sample image"></div>
      <div id="fiveLets">F&nbsp;I&nbsp;V&nbsp;E&nbsp;R</div>
      <div class="clearFix"></div>
         </div>
    </div>
</header>

CSS

header { width:100%; padding:0; margin:0; }
img { height: auto; max-width: 100%; padding: 0;}
#wrap { width:80%; margin:0 auto; outline: solid 1px red; background-color:#ccc;}
#container { margin: 0 auto; width:50%; background-color:#fff; outline: solid 1px blue;}
#logo { width:49%;}
#logo img { background-color: blue; float: left; }
#fiveLets { font-size: 2em; margin-top: 1.35em; float: right; margin-left: 1%; width:49%; }
.clearFix {clear:both}

/*responsive changes*/
@media screen and (max-width: 600px) {
    #fiveLets { font-size: 1em; } /*shrink text*/
    #wrap { background-color: #666; }
}
}
@media screen and (max-width: 300px) { /*doesn't seem to respond--jsfiddle*/
    #fiveLets { font-size: 0.75em; }
    #wrap { background-color: #333; }
}
}

1) 你有你的标题、标志和类型。

2) #container 将两个元素（徽标和类型，两者都是浮动的）更紧密地结合在一起，并且也集中在解决这个问题上。

3) 当您调整浏览器宽度时，#logo img 的 css 会自动调整，但类型，您需要添加一些响应式 css，使用媒体查询。

jsfiddle 似乎没有缩小到 300px，所以你必须在自己的浏览器中进行测试。

希望这会有所帮助！