ブラウザ/画面のサイズを変更したときにdivを移動する方法

流体設計を使用してかなり基本的なウェブサイトを構築していますので、divの幅を決定する際にピクセル値の代わりにパーセンテージを使用します。ブラウザ/画面のサイズを変更したときにdivを移動する方法

ブラウザのサイズを変更したり、画面のサイズを変更したりすると、divは移動せず、ブラウザの形にサイズ変更されます...ブラウザがサイズを変更したときに効率的になりました。 col1、col2、on列などなど、私はほとんどのものを使い果たしました。他の人の投稿からリバースエンジニアリングしてdivを入れたいと思っていても、これはスーパーです迷惑:)

HTML

<DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="layout.css"> 
</head> 

<header> 
    <div class="navbar"> 

    </div> 
</header> 

<body> 
     <div class="row1"> 

     </div> 
     <div class="row2"> 
      <div class="col1"> 

      </div> 

      <div class="col2"> 

      </div> 
     </div> 
     <div class="row3"> 
      <div class="col2"> 

      </div> 

      <div class="col1"> 

      </div> 
     </div> 
</body> 


<footer> 

</footer>

CSS

* { 
    margin:0; 
    padding:0; 
} 

.navbar { 
    position:fixed; 
    width:100%; 
    height:75px; 
    background-color: #c0f4de; 
    top:0; 
    left:0; 
    right:0; 
} 

.row1 { 
    margin-top:75px auto; 
    background-color: #c0f4de; 
    width:100%; 
    height:500px; 
} 

.row2 { 
    width:100%; 
    height:500px; 
} 

.col1{ 
    width:50%; 
    height:500px; 
    background-color: #ffffff; 
    float:left; 
} 

.col2 { 
    width:50%; 
    height:500px; 
    background-color: #eeeeee; 
    float: left; 
}

出典

2016-07-25 DCWD

お客様のHTMLは無効です。 'DOCTYPE'宣言に'！ 'がありません。「

」と「

これが問題の原因となりますか？ – DCWD

@DCWDそれはXufoxが正しいことではなく、より良いウェブ開発者になるのに役立つでしょう。あなたの間違いの権利を作ることは大いに意味します。乾杯！ –

あなたのCSSでmediaクエリを使用してみてください。クエリは厳密には画面サイズが異なるため、適切にサイズが変更されます。これは次のようになります。

@media screen and (min-width: 400px) and (max-width: 500px) { 
    .navbar { 
     width: 75%; 
    } 
}

出典

2016-07-25 05:01:46

"メディアクエリは厳密には異なる画面サイズに対応しています"という意味はわかりません。 'media'クエリは、画面の解像度、向き、画面の形状、その他多くのプロパティを区別することもできます。 – Xufox

これはどういう意味ですか？

@media screen and (max-width: 770px) { 
    .col1, .col2, .row1, .row2 { 
     clear: left; 
     width: 100%; 
    } 
};

また、誰かが有効なコードを持っていると言ったことについて。私はそれがここの問題だとは思わない。ただし、有効なコードがないと、ブラウザが予期せぬ動作をすることがあります。 W3学校はそのコードを確認することができますバリデータが有効である： https://validator.w3.org/

出典

2016-07-25 05:29:55

あなたがここに後にしているものをmedia queriesです。

Media queries特定の条件を満たす場合は、CSSをロードするだけです。後で設定

.col1 { 
    width: 100%; 
} 
.col2 { 
    width: 100%; 
} 

@media all and (min-width: 640px) { 

/* Code that runs when browser width is at least 640px */ 

{ 


@media all and (min-width: 1140px) { 

/* Code that runs when browser width is at least 1140px */ 

.col1 { 
    width: 50%; 
} 
.col2 { 
    width: 50%; 
} 

{

CSSプロパティは、以前のプロパティをオーバーライドします：シンプルなスタートはこのようなものになるだろう。これは時間がかかりすぎる場合は、のgrid systemを使用して調べることができます。

出典

2016-07-25 05:30:16

ブラウザ/画面のサイズを変更したときにdivを移動する方法

答えて

関連する問題