検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >[移転] レスポンシブウェブデザイン CSS3 Media Queries_html/css_WEB-ITnose

[移転] レスポンシブウェブデザイン CSS3 Media Queries_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:43:48910ブラウズ

レスポンシブ Web デザインの勉強を始めましょう。CSS3 メディア クエリは入門編です。

メディア クエリ。その機能は、メディア環境を決定する式を追加して、さまざまなスタイル シートを適用できるようにすることです。言い換えれば、コンテンツを変更せずに、さまざまなデバイスに正確に適合するようにページのレイアウトを変更できるようになります。

では、メディア クエリはどのように機能するのでしょうか?

2 つの方法があり、1 つはリンク内のデバイスのサイズを直接決定し、さまざまな CSS ファイルを引用する方法です: 

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

画面の幅が 400px 以上の場合、styleA を適用することを意味しますメディア内の .css

属性内:

  • screen は、CSS2.1 で 10 種類のメディア タイプが定義されています。
  • と はキーワードと呼ばれます。その他のキーワードには、 not (特定のデバイスを除く) があります。 , only(特定のデバイスに限定)
  • (min-width: 400px) はメディア属性で、括弧内に配置されます。完全な機能については、関連するメディア機能セクションを参照してください

    • <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

    画面の幅が 600 より大きく 800 未満の場合、styleB.css が適用されることを意味します

    その他のプロパティはここで確認できます: http ://www.swordair.com/blog/ 2010/08/431/

    もう 1 つの方法は、c9ccee2e6ea535a969eb3f532ad9fe89 タグ内に直接記述することです: 

    @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/  .class {    background: #ccc;  }}

    に @media を追加する方法です。フロント、およびリンク内の他のメディア属性は同じです

    実際、基本的にはスタイルオーバーライドです~、デバイスを決定し、カバーする異なるスタイルファイルを参照します。

    Webページは画面の幅に合わせてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素を使用することはできないことに注意してください。これは非常に重要です。そうしないと、水平スクロール バーが表示されます。

    補足: メディア クエリ内のすべてだけではないなどのキーワード

    今日、グループ内の友人グループから、@media のみの画面と (min-width: 320px) の「のみ」とは何を意味するのか尋ねられ、私はいくつかの情報を確認しました。

    not: not は、@media not print (非印刷デバイス) などの特定のデバイスを除外するために使用され、

    only: は特別なメディア タイプを指定するために使用されます。メディア クエリをサポートするモバイル デバイスの場合、唯一のキーワードが存在する場合、モバイル デバイスの Web ブラウザはその唯一のキーワードを無視し、次の式に基づいてスタイル ファイルを直接適用します。メディア クエリをサポートしていないが、メディア タイプ Web ブラウザを読み取ることができるデバイスの場合、唯一のキーワードが見つかった場合、このスタイル ファイルは無視されます。

    all: すべてのデバイス、これは頻繁に表示されるはずです

    他にもあります:

    ... ttyとして タイプライターや端末などの機器 tv テレビなどの機器の種類エンボス加工点字プリンター関連情報展開： http://book.51cto .com/art/201204/328362.htm以下はデモです
    <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>css3-media-queries-demo</title><style>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {    padding: 0;    margin: 0;}.content{    zoom:1;}.content:after{    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden; }.leftBox, .rightBox{    float: left;    width: 20%;    height: 500px;    margin: 5px;    background: #ffccf7;    display: inline;    -webkit-transition: width 1s ease;    -moz-transition: width 1s ease;    -o-transition: width 1s ease;    -ms-transition: width 2s ease;    transition: width 1s ease;}.middleBox{    float: left;    width: 50%;    height: 800px;    margin: 5px;    background: #b1fffc;    display: inline;    -webkit-transition: width 1s ease;    -moz-transition: width 1s ease;    -o-transition: width 1s ease;    -ms-transition: width 1s ease;    transition: width 1s ease;}.rightBox{    background: #fffab1;}@media only screen and (min-width: 1024px){    .content{            width: 1000px;            margin: auto        }}@media only screen and (min-width: 400px) and (max-width: 1024px){    .rightBox{        width: 0;    }    .leftBox{ width: 30%}    .middleBox{ width: 65%}}@media only screen and (max-width: 400px){    .leftBox, .rightBox, .middleBox{         width: 98%;        height: 200px;    }}</style></head><body><div class="content">  <div class="leftBox"></div>  <div class="middleBox"></div>  <div class="rightBox"></div></div></body></html>

    media_type

    Device type description

    all

    すべてのデバイス

    聴覚

    聴覚装置

    点字

    点字触覚装置

    取り扱い

    携帯電話、タブレットなどのポータブル デバイス

    print

    http://www.w3cplus.com/content/css3-media-queries

    http ://www.w3.org/TR/CSS2/media.html#media -types    		 ---------------------------- ------ゴージャスな分割線------ ----------------------------- ----------------- -

    異なるサイズの下で3列のレイアウトが2列になり、その後1列になります~

    		 コード：

    参考記事：http://www.swordair.com/blog/2010/08/431/

    http://www.zhangxinxu.com/wordpress/2011 /08/css3-media-queries%E7%9A%84%E4 %BA%9B%E9%87%8E%E5%8F%B2%E5%A4%96%E4%BC%A0/

    http:/ /webdesignerwall.com/tutorials/css3-media-queries

    http://www.ruanyifeng.com/blog/2012/05/sensitive_web_design.html 作者: Mofish

    http://www.cnblogs.com/ mofish/archive/2012/05/23/2515218.html

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：HTML共通タグ_html/css_WEB-ITnose次の記事：HTML共通タグ_html/css_WEB-ITnose

    関連記事

    続きを見る