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

Question

我今天正在制作网站的主要内容，我添加了两个<div>。我做得很完美所以每台显示器都会显示相同的效果。但是，当我尝试在纵向模式下在手机上打开它时，标题大于<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

您需要在CSS中添加@media规则，指示浏览器在窗口宽度小于X时立即替换100％（而不是70％和30％），其中X是您的认为这是发生这种情况的好选择。

看起来像这样：

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