レスポンシブ Web デザインを実装する方法

この記事で共有する内容は、レスポンシブ Web デザインの実装に関するもので、困っている友人に役立つことを願っています。

メディア クエリの使用法

メディア メディア クエリにはオプションのメディア タイプが含まれており、CSS3 仕様の条件を満たす場合、これらの式はメディアの特性を記述し、最終的に true または false として解析されます。メディア クエリで指定されたメディア タイプがドキュメントの表示に使用されるデバイス タイプと一致し、すべての式が true と評価される場合、メディア クエリの結果は true になります。

• 500px-800px@media screen と ( min-width: 500px) と (max-width: 800px) { ... }

• 最小幅 500 @media screen と (min-width: 500px){... }

• at @media not印刷および (最大幅: 1200px)

非印刷デバイスでの使用:

例

html:

nbsp;html>


    <meta>
    <title>响应式设计</title>

    <link>
    <link>
    <link>


    <p>头部</p>
    <p>
        </p><p>左边</p>
        <p>中间</p>
        <p>右边</p>
     
    <p>底部</p>

css1:

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
}

.left{
    width:100%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:100%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css2:

うわー

css3:

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
    
}

.left{
    width:30%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:70%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

実行結果:

1、

2、

3、

概要: クエリではさまざまな条件下でさまざまなスタイルを使用できるため、これまでのところ、さまざまな端末デバイスでさまざまなレンダリング効果をページで実現できます。 クエリは多くのブラウザでサポートされており、IE6 ～ 8 ブラウザを除くすべての最新のブラウザで完全にサポートされています。もう 1 つの違いは、メディアです。 他の CSS3 プロパティのように、別のブラウザーでクエリにプレフィックスを付ける必要はありません。

関連する推奨事項:

CSS レスポンシブ実装コードと効果について

CSS を使用してレスポンシブ レイアウトを実装する方法

以上がレスポンシブ Web デザインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。