css3media レスポンシブレイアウトのサンプル分析-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3media レスポンシブレイアウトのサンプル分析

高洛峰

Mar 07, 2017 pm 03:27 PM

レスポンシブレイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザーエクスペリエンスを提供することができ、大画面モバイルデバイスの人気が高まっている現在、これは「一般的なトレンド」と言っても過言ではありません。このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、確立されたパターンもいくつか見られます。テクノロジーの発展に伴い、CSS3 の新しいタグの多くは非常に使いやすく、CSS3 のレスポンシブレイアウトと同様に非常に高度なものになりました。元々は PC でのみ表示されていましたが、@media を追加することで Web ページをレスポンシブにすることができます。これは PC またはモバイルデバイスで使用でき、非常にスケーラブルになります。たとえば、このコードの効果は

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   

    </style>
    <body>
        <p id="p">小于200px背景变红色大于300px背景为黄色</p>
    </body>
</html>

ログイン後にコピー

です。単一条件または二重条件に使用できます。例: css3media レスポンシブレイアウトのサンプル分析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media (min-width:200px ) and (max-width:500px ) {   
            #p{   
                background: red;   
            }   
        }   
    </style>
    <body>
        <p id="p">200px以上并且500px以下背景变成红色</p>
    </body>
</html>

ログイン後にコピー

このコードは、200px 未満または 500px を超える場合は効果を表示しません

単純な @media はレスポンシブページを実装できません。とても簡単です?

私が作ったランダムなページです。これは 450px を超えるページ効果です

これは 450px 未満のページ効果です

一般的な方法は、各 p の幅が 450px 未満になるように応答的に縮小することです。 100% css3media レスポンシブレイアウトのサンプル分析

この Web ページを書いているときに小さな問題が発生しました。ページの下部に到達すると、下部のナビゲーションが正常に落ちず、途中で消えてしまいました。ここで小さな問題を共有します。最終的な解決策は、下部の p にスタイルクリアを与えるだけです。これにより、下部が下部にしっかりと固定され、水平になります。メディアのスタイルでは、垂直画面は @media (orientation:portrait) です

css3media レスポンシブレイアウトのサンプル分析垂直画面は @media (orientation:landscape) であるため、水平画面と垂直画面の両方に適応できます。 . 例えば、私たちが自分で履歴書を作成するときレスポンシブレイアウトを使用できれば、人事があなたの履歴書を携帯電話で見る可能性もはるかに高くなります