天天看點
傳回

快速入門響應式設計

在移動時代，單純學了DIV+CSS布局遠遠不夠，還要學習響應式布局将設計的網頁能在所有裝置都能顯示出最合适最好看的效果。說到響應式布局，可以學習和使用bootstrap這類優秀的響應式架構，但是覺得bootstrap太過臃腫或不自由，意圖自己寫輕量快速簡單的代碼的話，那就有必要學習CSS3和HTML5的新特性了。如果還是猶豫不知學習哪個的話，個人建議先學習HTML5和CSS3作為基礎，那樣在需要使用bootstrap來快速開發的時候隻需一小時就學會了。

最簡單的響應式就是應用CSS3的@media媒體查詢，簡單來說就是CSS代碼也能判斷目前使用的裝置是螢幕還是列印機還是投影儀等等，然後根據不同裝置寫相應的代碼來顯示最佳的效果，老實說，個人最喜歡CSS，易學，直覺，優雅，強大，跟JSON一樣，寫起來特别舒服和快捷。

首先來看一下最簡單的@media的用法代碼：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /*如果裝置螢幕最大寬度為1200像素，則h1的字型顯示藍色*/
        @media screen and (max-width:1200px){
            h1{
                color:blue;
            }
        }
        /*如果裝置螢幕最大寬度為900像素，則h1的字型顯示粉紅色*/
        @media screen and (max-width:900px){
            h1{
                color:pink;
            }
        }
        /*如果裝置螢幕最大寬度為600像素，則h1的字型顯示綠色*/
        @media screen and (max-width:600px){
            h1{
                color:green;
            }
        }
    </style>
</head>
<body>
    <h1>
        Hello,world!
    </h1>
</body>
</html>

看注釋應該能看懂吧，一般我寫的注釋隻有我能看懂，是以我經常在項目裡面注釋，雖然自認自己代碼寫得也不是特别好，但是我還是要裝下逼，萬一高手将我代碼改得更好我能學習一下，萬一碰到新手那我在其眼中就是大神了。回到正題，如果改一下上面style裡面的代碼，同樣也能實作相同的功能：

/*如果裝置螢幕最小寬度為600像素，則h1的字型顯示綠色*/
        @media screen and (min-width:600px){
            h1{
                color:green;
            }
        }
        /*如果裝置螢幕最小寬度為900像素，則h1的字型顯示粉紅色*/
        @media screen and (min-width:900px){
            h1{
                color:pink;
            }
        }
        /*如果裝置螢幕最小寬度為1200像素，則h1的字型顯示藍色*/
        @media screen and (min-width:1200px){
            h1{
                color:blue;
            }
        }

對比兩種功能一樣的代碼，我強烈推薦使用第一種方式，因為可能能減少浏覽器的解析（為什麼是可能，自己弄懂去）進而加快那麼一點點速度，不過天下武功，唯快不破，是以快那麼一點也是值得的。如果你是那麼好學而勤快和謙虛的學生，也許你已經将上面的代碼敲進sublime或者Atom或者其中編輯器并打開在浏覽器看效果了，你會發現，字型的顔色沒變嘛，别急，點選你浏覽器右上角最小化旁邊的視窗，然後将視窗橫向拖着縮小視窗，你會驚奇地發現字型變色了，将浏覽器的寬度拖到最小，再慢慢拖大，感受一下響應式的魅力吧。

那麼我的這篇在床上躺着寫出來的部落格寫完手工結束了嗎？不，當然還沒結束，我還要再講多一點點東西，不過我不太喜歡多說，直接上代碼，代碼是最好的描述方式：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /*預設樣式*/
        .logo, .nav, .content, .footer{
            width:90%;
            padding:40px 5%;
            background-color: #ccc;
            text-align: center;
            line-height: 1.5;
            font-weight: bold;
            float:left;
        }

        /*在媒體查詢中，最好寫需要更改的某個樣式*/

        /*如果裝置螢幕最大寬度為1200像素，則應用樣式*/
        @media screen and (max-width:1200px){
            .logo, .nav{
                width:40%;
                color:white;
            }
            .logo{
                background-color: blue;
            }
            .nav{
                background-color: green;
            }
            .content{
                color:yellow;
            }
        }
        /*如果裝置螢幕最大寬度為900像素，則應用樣式*/
        @media screen and (max-width:900px){
            .logo, .nav{
                width:40%;
            }
            .content{
                background-color: red;
                color:white;
            }
            .footer{
                font-weight: normal;
            }
        }
        /*如果裝置螢幕最大寬度為600像素，則應用樣式*/
        @media screen and (max-width:600px){
            .logo, .nav{
                width:90%;
            }
        }
    </style>
</head>
<body>
    <div class="logo">
        LOGO
    </div>
    <div class="nav">
        導航
    </div>
    <div class="content">
        内容
    </div>
    <div class="footer">
        底部
    </div>
</body>
</html>

同理，勤奮好學的童鞋已經開始看這串代碼的效果了，浏覽器拖來拖去，畫面變來變去好好玩對吧，眼尖的童鞋不覺得好玩了，因為會發現有那麼一點點的問題，就是小于600像素的查詢樣式居然會延續應用了小于900像素的樣式，這個是BUG嗎？不是BUG，學過CSS都知道最新的樣式會覆寫之前的樣式，是以要麼就在需用回之前的樣式地方重新寫樣式，要麼偷懶還有一種方式，就是媒體查詢還有一種文法：

@media screen and (max-width:1200px) and (min-width:900px)
@media screen and (max-width:900px) and (min-width:600px)

看得懂嗎？應該一眼就看懂是什麼意思了吧，如果看不懂真要面壁思過了，如果苦思冥想還是不懂，那就是我的問題了。到了這裡，你應該了解到響應式要怎麼寫代碼了，不過響應式設計知識網頁設計的冰山一角，而且像這篇文章的内容不少書籍和大神的部落格老早就寫了一大堆。最後，當你在浏覽器放大縮小做響應式網站做得很爽的同時，千萬要記得在header标簽加這串代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

沒有這串，你手機顯示的效果就不忍直視。這個是H5的meta新用法，想要改一下或了解更多屬性的值和用法的請參閱手冊或者W3C文檔。謝謝觀看。

css3 響應式設計 bootstrap html5 css
上一篇: html5響應式網站+asp,建構HTML5+響應式設計網站
下一篇: 如何為你的響應式設計提速？

繼續閱讀