css - react 灵敏。在媒体查询、 float 问题和字体大小中使用 CSS 更改 显示顺序

Question

我正在处理这个页面:

http://www.analog.la/test/ret/index2.html

基本上有一个包含 5 的分区。它们向左浮动以垂直排列，但我在如何调整媒体查询中的 CSS 方面遇到了一些问题(一个用于 768，一个用于 480)。

如您所见，主要顺序为 Logo 、hex1、middle、hex2、hex3。

float 问题

对于 768，我非常希望有 Logo 和 hex1(居中)，然后是 middle below(居中)以及 hex2 和 3(居中)。但是当我把浮子从中间移开时，它就被“从浮子方程式中移除了”，一切都变得很尴尬!所以我将它设置为没有 float ，但这将中间的 div 推得太低了，我不喜欢。任何提示将不胜感激!!

显示顺序

对于 480 及更低版本，我真的很想改变分区的顺序，这样我就可以获得 Logo ，然后是“中间”部分，然后是十六进制链接，但我不知道如何更改顺序通过 CSS。我在这里看到了一个类似的线程 - 但是这个人使用了提供的网格，我只是自己把它放在一起所以它似乎不适用。

字体大小

只是想知道是否有字体大小(用于标题)响应页面宽度？这不是真正的高优先级，但很高兴知道!

非常感谢。

Answer 1

对于花车:尝试使您的 .links1 和 .links2 div 宽度为 100%，并向它们添加 css clearfix 以清除 float 。这可能会解决 .preorder div 的格式问题。要使六边形居中，您也可以尝试向 .links1 和 .links2 div 添加 text-align:center 规则。

这是一篇来自 chris Coyner 网站的关于 clearfix 的文章:http://css-tricks.com/snippets/css/clear-fix/

对于字体大小:如果您想随着窗口大小的调整逐渐更改它，请查看 fitText:http://fittextjs.com/ -- 它需要一些调整才能很好地工作，但看起来这就是您要寻找的效果。

此外，看起来您可能需要对 .container div 进行 clearfix