肖像画モードのサイトではタイトルが大きすぎます

Question

今日はメインサイトを作っていましたが、私は<div>を2つ追加しました。私はそれを完全にすべてのモニターで同じように表示されるようにしました。しかし、私がポートレートモードで自分の携帯電話でそれを開こうとしたとき、タイトルは<div>の空き領域より大きく、2つの<div>は1つ下に向かっています。

私の場合よりもはるかに小さな画面の電話があるので、それは問題ありません。しかし、<div>のサイズは同じです。それは1つの下にある場合は、すべての画面に合うように100％に上っていない。それは同じ70％と30％を維持しているとひどいです。

そして、これはコードです：：ここではその一部の画像であるあなたがにブラウザを指示し、あなたのCSSで@mediaルールを追加する必要があります

#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

ウィンドウの幅がXより小さいとすぐに100％（70％と30％の代わりに）を置き換えます。ここでXは、これが起こるための良い選択であると思います。

それは次のようになりたい：これは働いていた

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