Question

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

以下是手机上的内容： CSS代码也在那里：

你们有没有想法如何使用设备的屏幕制作徽标和文字缩放，以便我定位它看起来不错？

编辑：根据要求提供CSS和HTML代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

首先要注意一些要点

img是自闭标签。所以我们不能把`span标签放在里面。
为了使页面响应，我们必须使用bootstrap提供的那些类。
您应该将col-xs-10和col-xs-offset-2用于移动设备
在bootstrap中row个12列不包含11。

检查我的摘要图片在移动设备中的响应速度。

#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-2 col-sm-10 col-sm-offset-2 col-xs-10 col-xs-offset-2" 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>
      </div>
      <div class="col-md-10 col-md-offset-2 col-sm-10 col-sm-offset-2 col-xs-10 col-xs-offset-2" id="head"></div>
    </div>
  </div>
</header>

Answer 2

一旦视口低于360px，您可以使用媒体查询来更改字体的大小;例如，一旦视口低于360px，那么320px的体色将改变为表示字体何时重新调整大小。

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

＆＃13;

var dd = {
    content: [
        { 
            text: 'This is a header, using header style', 
            style: 'header' 
        }
    ],
    styles: {
        header: {
            fontSize: 18,
            bold: true,
            background: '#ff1'
        }
    }
}

＆＃13;

@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;
  }
}

＆＃13;

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

2 个答案: