css - 网站文字对移动设备不友好

Question

我的问题是我的文本没有响应，我尝试删除文本，图像是响应的，只是文本没有..有一个白色边框。我不知道如何解决这个问题，它认为我的 CSS 代码有问题，但我不知道是什么。

#stage {
    background: url('../img/ozadje.jpg') center center no-repeat;
    background-size: cover;
    position:absolute;
    color: white;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}


#stage-caption{
    font-size: 1.4rem;
    font-weight: 200;
    max-width: 80rem;
    margin: 0 auto;
}
#stage-caption h1{
    font-size: 3.5rem;
    color:silver;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 150%;
    
        
}
#stage-caption p{
   color:silver ;
    font-size: 2.5rem;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    
}

      
      <div id="stage">
     <div id="stage-caption">
     <h1 class="display-3">
         THERE'S ONLY ONE MIHAEL SOBOČAN, WEB DESIGNER & PROGRAMMER!
     </h1></div>
      </div>

问题截图 http://i.stack.imgur.com/FBKyO.png

Answer 1

老实说，只有当您使用非常小的屏幕尺寸时，它才会开始发生......所以可能真的不值得担心。

但问题是“PROGRAMMER”这个词太长了，不能再短了，并且将视口(viewport)的宽度推得更远。

因此，如果您真的担心的话，您的解决方案是使用 768 像素以下的媒体查询来减小字体大小。

@media (max-width:768px) {
    #stage-caption h1 {font-size:1em;}
}