響應(yīng)式網(wǎng)站設(shè)計(jì)布局是國際上最新的方式，非常先進(jìn)，可以說是最符號(hào)現(xiàn)代互聯(lián)網(wǎng)網(wǎng)頁設(shè)計(jì)，一個(gè)網(wǎng)站css布局解決了所有的上網(wǎng)設(shè)備，今天重點(diǎn)學(xué)習(xí)一下如何寫響應(yīng)式網(wǎng)站代碼，怎么樣控制手機(jī)版本和電腦版本的css顯示區(qū)別，這文章可能會(huì)經(jīng)常的不定期的更新內(nèi)容。網(wǎng)站建設(shè)★網(wǎng)站設(shè)計(jì)★網(wǎng)站制作★網(wǎng)頁設(shè)計(jì)-599元全包;企業(yè)網(wǎng)絡(luò)推廣☆網(wǎng)站優(yōu)化☆seo☆關(guān)鍵詞排名☆百度快照-2200元全年展示;做網(wǎng)站優(yōu)化排名-網(wǎng)站建設(shè)公司?18107340881css3響應(yīng)式布局設(shè)計(jì)舉例：

/*瀏覽器的可視區(qū)域不小于980px*/  @media screen and (min-width:980px){    .head{width:100%; height:70px; }    .head #logo{position:fixed; top:0px; left:50px;}    .head  nav{ width:870px;background:#fff;height:70px; margin:0 auto;}    .head  nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; }    }/*瀏覽器的可視區(qū)域在640px和980px之間*/ @media screen and (min-width:640px) and (max-width:980px){    .head{width:70px;height:870px;}    .head  nav{ width:70px;background:#fff;height:870px;margin-top:20px;}    .head  nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; }    }/*瀏覽器的可視區(qū)域小于640px*/ @media screen and (max-width:640px){    .head{width:256px; height:256px;position:fixed;  bottom:20px; left:20px;}    .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;}    .head  nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;}    .head  nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; }

/*小于200px*/        @media only screen and (max-width:200px ) {            #p{                background: red;            }        }/*大于300px*/        @media only screen and (min-width:300px ) {            #p{                background: yellow;            }        }

1.首先要了解一下什么是媒體查詢

媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測(cè)的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

2.如何在css中引入媒體查詢

媒體查詢寫在CSS樣式代碼的最后，CSS是層疊樣式表，在同一特殊性下，靠后的的樣式會(huì)重疊前面的樣式

3.開始在html中寫入Media

1.在html頭部添加以下代碼，用來顯示兼容移動(dòng)設(shè)備的顯示效果

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

參數(shù)詳解：?。width=device-width ：寬度等于當(dāng)前設(shè)備的寬度?。initial-scale=1 ：初始的縮放比例。（默認(rèn)為1）?。minimum-scale=1 ：允許用戶縮放到的最小比例。（默認(rèn)為1）?。maximum-scale=1 ：允許用戶縮放到的最大比例。（默認(rèn)為1）?。user-scalable=no ：用戶是否可以手動(dòng)縮放（默認(rèn)為no）2.引入包含Media的css文件

?一般情況html和css代碼都是分開寫的，media也不例外

<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/><link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>

3.寫Media中的代碼

?以某個(gè)網(wǎng)頁的響應(yīng)式布局為例

結(jié)構(gòu):@media 設(shè)備類型 and (設(shè)備特性)｛樣式代碼｝

/*媒體查詢*//*當(dāng)頁面大于1200px 時(shí)，大屏幕，主要是PC 端*/@media (min-width: 1200px) {    }/*在992 和1199 像素之間的屏幕里，中等屏幕，分辨率低的PC*/@media (min-width: 992px) and (max-width: 1199px) {    #adver .center {        width: 50%;        margin: -10px 0 0 -25%;    }    main .center h2 {        font-size: 40px;    }}/*在768 和991 像素之間的屏幕里，小屏幕，主要是PAD*/@media (min-width: 768px) and (max-width: 991px) {    #adver .center {        width: 60%;        margin: -10px 0 0 -30%;    }    #adver .search, #adver .button {        font-size: 20px;    }    main .center h2 {        font-size: 35px;    }}/*在480 和767 像素之間的屏幕里，超小屏幕，主要是手機(jī)*/@media (min-width: 480px) and (max-width: 767px) {    header, header .center, header .link {        height: 45px;    }    header .logo, .sm-hidden,.sidebar,.md-hidden {        display: none;    }    header .link {        width: 100%;        line-height: 45px;    }    #adver {        padding: 45px 0 0 0;    }    #adver .center {        width: 70%;        height: 53px;        margin: -10px 0 0 -35%;    }    #adver .search, #adver .button {        height: 45px;        font-size: 18px;    }    .sm-visible {        display: block;    }    main .center h2 {        font-size: 30px;    }    main .center p {        font-size: 15px;    }    main figure {        width: 49.2%;    }}/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手機(jī)*/@media (max-width: 479px) {    header, header .center, header .link {        height: 45px;    }    header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {        display: none;    }    header .link {        width: 100%;        line-height: 45px;    }    header .link li {        width: 25%;    }    #adver {        padding: 45px 0 0 0;    }    #adver .center {        width: 80%;        height: 48px;        margin: -10px 0 0 -40%;    }    #adver .search, #adver .button {        height: 40px;        font-size: 16px;    }    .sm-visible {        display: block;    }    footer .bottom, footer .version {        font-size: 13px;    }    main .center h2 {        font-size: 26px;    }    main .center p {        font-size: 14px;    }    main figure {        width: 99%;    }}

響應(yīng)式布局的原理就是在不同的窗口大小下顯示不同的結(jié)構(gòu)和樣式。只要掌握好css的樣式，響應(yīng)式布局就沒問題(≧▽≦)/啦啦啦

?最后再補(bǔ)充一點(diǎn)常用的設(shè)備類型（媒體類型）1.all (所有的設(shè)備)2.screen (電腦顯示器)3.print (打印用紙或打印預(yù)覽圖)4.handheld (便攜設(shè)備)5.tv (電視機(jī)類型的設(shè)備)