css - Css - 流畅的布局，以每个确定的宽度改变网站的外观

Question

我正在尝试在导航栏上工作，就像http://seesparkbox.com/上的导航栏 一般，当用户在计算机浏览器窗口中查看页面时，我希望导航完全水平。

但是，如果用户从较小的宽度（导致我的导航栏换行）查看导航，我想通过将公司徽标放在导航文本的顶部来重新格式化导航栏，并制作导航文本（链接）尺寸较小，以适应浏览器的大小。

我只需要一点正确的方向。如果有一个简单的答案，那就太好了，我真的很感激你的帮助，如果没有你知道的教程可以帮助解决这个问题，我也会很感激。

我对 css 还是很陌生。

Answer 1

您可以将% widthwithmedia Query用于Fluid layout.

阅读这些文章了解更多

http://css-tricks.com/6206-resolution-specific-stylesheets/

http://css-tricks.com/138-the-perfect-fluid-width-layout/

Answer 2

像这样的东西应该可以解决问题。这将根据 3 个宽度进行切换：

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

<link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

<link href="pad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" >

希望这可以帮助！

谢谢！