肖像模式下的网站显示标题太大

Question

我今天正在制作网站的主要内容，并添加了两个<div> s。我在每台显示器上显示效果都很完美。但是，当我尝试在肖像模式下在手机上打开它时，标题大于<div>和两个<div>的可用空间。

对我来说没问题，因为手机的屏幕比我的小得多。但<div>大小保持不变;如果它是一个合适的屏幕，它不会达到100％。它保持相同的70％和30％，这很糟糕。下面是一些图片：

这是代码：

#glavno { 
 
    width: 100%; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.reklami { 
 
    display: inline-table; 
 
    width: 30%; 
 
    height: auto; 
 
    margin: 0; 
 
    top: 0; 
 
} 
 
.novo { 
 
    display: inline-table; 
 
    top: 0; 
 
    width: 70%; 
 
    height: auto; 
 
    margin: 0; 
 
} 
 
.naslovnovosti { 
 
    font-size: 2em; 
 
    background-color: #41c2ac; 
 
    color: white; 
 
    width: 100%; 
 
} 
 
.naslovreklami { 
 
    font-size: 2em; 
 
    background-color: #41c2ac; 
 
    color: white; 
 
    width: 100%; 
 
}

<div id="glavno"> 
 
    <div class="novo"> 
 
    <div class="naslovnovosti"> 
 
     Новости 
 
    </div> 
 
    novost1 
 
    <hr>novost2 
 
    <hr>novost3 
 
    <hr>novost4 
 
    <hr>novost1 novost2 novost3 novost4 
 

 
    </div> 
 
    <div class="reklami"> 
 
    <div class="naslovreklami"> 
 
     Реклами 
 
    </div> 
 
    deneska se sluci cudo vo valandovo 
 
    <hr>novost2 
 
    <hr>novost3 
 
    <hr>novost4 
 
    <hr> 
 
    </div> 
 
</div>

Answer 1

您需要添加一个@media规则在你的CSS，指示浏览器一旦窗口宽度小于X，就代替100％（而不是70％和30％），其中X是您认为这是发生这种情况的最佳选择。

它会是这样的：

@media screen and (max-width: 480px) { 
    .reklami {width: 100%;} 
    .novo {width: 100%;} 
}