html - Bootstrap - 设计一个好的标题/导航栏

Question

我正在制作自己的网站，但在移动设备上遇到了外观问题。 这是 header 代码的图片以及它在 PC 上的样子:

这是在手机上的: CSS 代码也在那里:

你们有什么想法可以使 Logo 和文本随设备屏幕缩放，以便我定位它并且它看起来不错吗？

编辑:请求的 CSS 和 HTML 代码:

#logo {
	margin-top: -10px;
	max-width: 125px;
}
@font-face {
	font-family: "arcadepix";
    src: url("../fonts/Arcadepix Plus.woff") format('woff');
}
#header {
	z-index: 10;
	padding-top: 15px;
	padding-bottom: 5px;
	padding-left: 20px;
	background-color: #fffddc;
	-webkit-box-shadow: 2px 2px 18px 1px rgba(0,0,0,0.67);
	-moz-box-shadow: 2px 2px 18px 1px rgba(0,0,0,0.67);
	box-shadow: 2px 2px 18px 1px rgba(0,0,0,0.67);
	border-bottom: 3px #867b99 dotted;
}
#head {
	z-index: 10;
	color: black!important;
	border-style: solid;
	border-width: 0px 0px 50px;
	-moz-border-image: url(../img/border.png) 50 0 round repeat;
	-webkit-border-image: url(../img/border.png) 50 0 round repeat;
	-o-border-image: url(../img/border.png) 50 0 round repeat;
	border-image: url(../img/border.png) 50 0 fill round repeat;
}

<header>
	<div class="container">
		<div class="row">
			
			<div class="col-md-10 col-md-offset-1" id="header">
				<img id="logo" src="img/!bones.png"><span style="margin-left: 20px;font-family: arcadepix!important;font-size:2.750em;color:#6b627a;">Fishbones</span></img>
			</div>
			<div class="col-md-10 col-md-offset-1" id="head"></div>
		</div>
	</div>
</header>

Answer 1

一旦视口(viewport)小于 360 像素，您就可以使用媒体查询来更改字体大小；看例子，一旦视口(viewport)低于 360 像素，然后 320 像素，主体颜色将变为 as 以表示何时调整字体大小。

*我还将您的内联样式移到了样式表中。

@font-face {
  font-family: "arcadepix";
  src: url("../fonts/Arcadepix Plus.woff") format('woff');
}
#logo {
  margin-top: -10px;
  max-width: 125px;
}
.fish-text {
  margin-left: 20px;
  font-family: 'Arcadepix';
  font-size: 2.750em;
  color: #6b627a;
}
#header {
  z-index: 10;
  padding-top: 15px;
  padding-bottom: 5px;
  padding-left: 20px;
  background-color: #fffddc;
  -webkit-box-shadow: 2px 2px 18px 1px rgba(0, 0, 0, 0.67);
  -moz-box-shadow: 2px 2px 18px 1px rgba(0, 0, 0, 0.67);
  box-shadow: 2px 2px 18px 1px rgba(0, 0, 0, 0.67);
  border-bottom: 3px #867b99 dotted;
}
#head {
  z-index: 10;
  color: black!important;
  border-style: solid;
  border-width: 0px 0px 50px;
  -moz-border-image: url(../img/border.png) 50 0 round repeat;
  -webkit-border-image: url(../img/border.png) 50 0 round repeat;
  -o-border-image: url(../img/border.png) 50 0 round repeat;
  border-image: url(../img/border.png) 50 0 fill round repeat;
}
@media (max-width: 360px) {
  body {
    background: red;
  }
  #header {
    text-align: center;
  }
  .fish-text {
    display: block;
    margin-left: 0;
  }
}
@media (max-width: 300px) {
  body {
    background: lightblue;
  }
  .fish-text {
    margin-left: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1" id="header">
        <img id="logo" src="http://placehold.it/150x40/f00/fff?text=FISH" /><span class="fish-text">Fishbones</span>

      </div>
      <div class="col-md-10 col-md-offset-1" id="head"></div>
    </div>
  </div>
</header>