Question

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

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

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

我环顾四周，似乎有多种方法可以做到这一点。基于不断发展的html和css功能，所有人都有自己的注意事项，我猜的是css比html更多。

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

Answer 1

根据屏幕尺寸，基本上有两种更改内容的方法：

1。使用百分数

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

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

在此示例中，类.content的高度始终为50％，宽度为90％ - 只要用户更改屏幕大小，它就会更改其像素大小。您可以使用它创建一个非常灵活的布局。

2。 @媒体querys

如果你想改变大小以上的东西，你有静态布局或想要创建类似移动版本的东西，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的非常好的noob教程

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，因此您必须在自己的浏览器中进行测试。

希望这有帮助！

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

2 个答案:

1。使用百分数

2。 @媒体querys