我是网络开发的新手。我是第一次为客户创建一个网站。当我把窗口缩小时，我的文字逐渐消失“INNOATIVE ..... EDUCATION”相互碰撞。我想要他们要做出回应，保持一条线，但要小一些。如果有人能帮助我，我将不胜感激。
https://jsfiddle.net/dL9m41se/
Ralevant CSS：
Action答案 0 :(得分：1)
选项是使用视口单元vw作为字体大小
font-size: 2.5vw;
示例代码段
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
margin-right: auto;*/
/*width: 10%;
height: 3%;*/
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-left: 12%;
/* margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;
}*/
}
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.box{
padding-left:8%;
width: 16.7%;
height: 5%;
font-size: 2.5vw;
position: relative;
margin: .8%;
float: left;
overflow:inherit;
/*border: 1px solid #333;
background: #999;*/
} <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/1.jpg">
<div class="caption">
<div class="center-div-words" >
<h1> <span style="color: #000;font-family: 'Special Elite', cursive; ">CENTER FOR MEMBRANE STUDY</span></h1>
<p style="font-size: 100%;font-family: 'Special Elite', cursive;"><span class="box fade-in one" id="1">INNOATIVE</span><span class="box fade-in two" id="2">COLLABORATIVE</span><span></span><span class="box fade-in three" id="3"> INTERDISCIPLINARY</span><span class="box fade-in four" id="4">RESEARCH</span>
<span class="box fade-in five" id="5">EDUCATION</span>
</p>
</div><!-- center-div-words -->
</div> <!-- caption -->
</div> <!-- image -->
</div><!--/#home-slider-->
答案 1 :(得分：0)
将此添加到您的CSS，现在这些词语不会交叉。 响应明智，将它们置于彼此之下会更好。 保持内联并不是明智的最佳实践。
当然，请根据需要调整最大宽度。
@media screen and (max-width: 600px){
.box{
width:100%;
}
}
如果你想让它们保持内联，请告诉我，我会做更多的调整！
答案 2 :(得分：0)
您可以使用@media查询在某些font-size后减少width（根据您的利益调整值，将演示设置为16px）：
@media (max-width: 768px) {
p span {
font-size: 16px;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
/* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
/*margin-left: auto;
margin-right: auto;*/
/*width: 10%;
height: 3%;*/
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-left: 12%;
/* margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;
}*/
}
.fade-in.five {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
/*margin-left: auto;
margin-right: auto;*/
/* width: 10%;
height: 3%;*/
}
.box {
padding-left: 8%;
width: 16.7%;
height: 5%;
position: relative;
margin: .8%;
float: left;
overflow: inherit;
/*border: 1px solid #333;
background: #999;*/
}
@media (max-width: 768px) {
p span {
font-size: 16px;
}
}<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/1.jpg">
<div class="caption">
<div class="center-div-words">
<h1> <span style="color: #000;font-family: 'Special Elite', cursive; ">CENTER FOR MEMBRANE STUDY</span></h1>
<p style="font-size: 100%;font-family: 'Special Elite', cursive;"><span class="box fade-in one" id="1">INNOATIVE</span><span class="box fade-in two" id="2">COLLABORATIVE</span><span class="box fade-in three" id="3"> INTERDISCIPLINARY</span><span class="box fade-in four" id="4">RESEARCH</span>
<span class="box fade-in five" id="5">EDUCATION</span>
</p>
</div>
<!-- center-div-words -->
</div>
<!-- caption -->
</div>
<!-- image -->
</div>
<!--/#home-slider-->
答案 3 :(得分：0)
您可以采用的一种方法是添加媒体查询以设置最大宽度，以便它只能变得如此之小。
@media only screen and (max-width: 480px) {
/* This CSS will be applied only to phones and other small devices. */
font-size: 20px; width: 100%; }
//Lots more can be done in there
您也可以使用flexBox来提供帮助。
<script type="text/javascript">
$('#mainNavbar').flexMenu();</script>
并查看此页面here。它有一个关于响应式导航栏设计/创建的小教程。