レスポンシブhtmlとCSSを使用したメディアクエリ

Question

私の質問では、同様の質問をしましたが、ブートストラップフレームワークを使用していました。私は、グリッドシステムが本当に好きではないので、ブートストラップを使わずに応答性の高いページを作成したいと思っています。

私は、水平および垂直にセンタリングされた2つのdivを持っています。ウィンドウが最小化されたときに、反応して積み重ねるようにしたいと思います。私のcodeはCodePenにあります。私はそれを数回試みられていると私はまだそれに近づくことがないことを確認する方法：あなたはdivタグを使用してコンテンツを分離しているので、それは積み重ねていない

@media only screen and (max-width: 768px){ 
    #about #aboutInfo{ 
    border: solid; 

    float:none; 
    text-align: center; 
    width: 100%; 
    } 
    #about #aboutInfo{ 
    float: none; 
    width: 100%; 
    } 
} 

Answer 1

私はすでにあなたの問題を以前の投稿で解決しましたが、okです。まず浮動小数点数は歴史と浮動小数点数なので、浮動小数点の使用をやめることをお勧めします。デフォルトでは要素があなたのコードに書かれているように浮かばないので何もしません。第二に、フレックスボックスとそれがもたらす可能性を詳しく見てみることをお勧めします。なぜなら、レスポンシブウェブのデザイン/開発には本当に輝くからです。

だから、もう一度、あなたのメディアクエリに以下のコードを追加することで問題を解決：

#about { 
    flex-direction: column; 
} 

そしてまた、それはいくつかの基本的なCSSブラウザのリセットを使用することは常に良いことだ前に、私はあなたに言ったように：

* {margin:0;padding:0;box-sizing:border-box} 
html, body {width: 100%} 

Answer 2

理由があります。セクションを1列にして、次のようにスタイルします。https://www.w3schools.com/css/css_rwd_mediaqueries.asp

divstタグのように動作する行タグがあります。しかし、それぞれの列は、文字通り "col - **"で、それらの後ろにスタイリングがあります。私は右のあなたを理解していれば

Answer 3

、あなたが追加する必要があり

flex-flow: row wrap; 

または#aboutで

flex-wrap: wrap; 

。