1

HTMLとCSSでWebサイトを書いています。私の問題は、たとえば、ブラウザーで Web サイトを実行するときに、すべてのマージンをパーセントで調整することです。しかし、ブラウザをフルスクリーンで実行したり、ウィンドウのサイズを調整したりすると、Web サイトのさまざまな部分がバラバラになり、本来の位置に収まりません。ウィンドウのサイズに比例するため、パーセント単位でその問題が解決されないのはなぜですか?

CSS:

#aboutMeDiv
{
    background-image: url('noisyBlue.png');
    position: absolute;
    width: 100%;
    height: 118px;
    margin-top: 13.6em;
    margin-left: -0.7%;
    opacity: 0.5;
    transition: opacity 0.3s;
}

ウィンドウが変わっても「同じように」するにはどうすればよいですか？ありがとう！

4

1 に答える 1

2

コードを見ないと正確な回答は得られませんが、コンテナ要素にmin-widthandを追加することで、この問題を解決できる可能性があります。max-width

たとえば、幅が 700px 未満で 1500px を超えると構造がばらばらに見える場合は、次のように使用できます。

.container {
    max-width: 1500px;
    min-width: 700px;
}

もちろん、これはレスポンシブ デザインを阻害する可能性があります (特にモバイル ブラウザーの場合)。Twitter BootstrapやGumby Frameworkなど、既に作成されている CSS フレームワークを確認することをお勧めします。

質問への次のコードの追加を編集します。

ウィンドウが変わっても「同じように」するにはどうすればよいですか？ありがとう！

#aboutMeDivウィンドウサイズが変わっても「同じように」したい場合は、divサイズのパーセンテージではなく具体的​​な数値を使用する必要があります。つまりwidth: 100%;、のようなものに変更しwidth: 700px;ます。次に、上記のように、 amin-widthを使用して、画面に div 内のすべてのコンテンツが表示されるようにすることができます。

于 2013-03-28T21:42:25.000 に答える