響應式網頁設計簡單入門

時間  2019-11-20
標籤 響應 網頁設計 簡單 入門 简体版
原文   原文鏈接

 

Overview:javascript

構造基本的HTML頁面css

動態加載樣式表html

Viewportjava

字體縮放css3

側邊欄web

導航菜單瀏覽器

圖片自適應app

其餘ide

總結函數

 

說到響應式網頁設計(Responsive web design)，最近在谷歌加上碰到個奇葩貼子，經過一個原始到沒法再簡單的網頁Motherfucking Website及滿屏幕的fuck道出了網頁設計的真諦，這孩子不是個激進分子就是個報復社會型的貨沒錯，雖然整篇文章就像是潑婦罵街，但我特麼是笑着讀完的。。

統計了下全文共用Fuck (包括fucking) 33次，shit （包括shitty）16次，Motherfucker 8次，創下我所閱讀的技術類文章裏面髒話之最。

文章表達的中心思想就是最後的那句引用"最好的設計是儘可能少的設計"。最重要的是我意識到平時咱們都忽略了一個常識：一張未經加工的原始HTML文檔就已是響應式的了，根本不用什麼CSS media屬性或者指定任何樣式。

經過查看HTML代碼發現做者果真留下了一些信息，因而在twitter上找到他表達了我對他的膜拜之情以及想把如此精華的文章翻譯成中文的意願。做者很爽快地答應了23333~~(X___X)~~。

因而就有了一樣奇葩的中文版本：媽逼的網站，原文的精髓可能因爲我自身對這類表達的駕馭的不夠而丟失了一些，但多少仍是可以方便嫌英文閱讀麻煩的同窗們圍觀的了。

 

固然以上全是扯淡，一如做者所指出的，至關諷刺。

回到正題，各類屏幕尺寸滿天飛的時代如何讓網站自適應的究極解決方案：響應式設計（Responsive Design）。

構造基本的HTML頁面

一個簡單的博客頁面

始終以爲再多口水都沒有一個生動鮮明的例子來得實在，下面經過對一個普通HTML頁面的改造來體驗什麼是響應式設計及如何達到。

下面構造一個基本的HTML頁面，它包含網站導航菜單，正文，圖片，側邊欄，表格式的佈局以及頁腳信息。是個很是完整而中庸的佈局，幾乎是常見的博客版面。

 

複製代碼 
<html>
    <head>
        <title>
            Responsive Design Example
        </title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="main">
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Articles</a>
                    </li>
                    <li>
                        <a href="#">Gallery</a>
                    </li>
                    <li>
                        <a href="#">Forum</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </nav>
            <aside>
                <ul>
                    <li><a href="#subtitle1">item1</a> </li>
                    <li><a href="#subtitle2">item2</a></li>
                    <li><a href="#subtitle3">item3</a></li>
                    <li><a href="#subtitle4">item4</a></li>
                    <li><a href="#subtitle5">item5</a></li>
                </ul>
            </aside>
            <section class="post">
                <article>
                    <h1>
                        Sample Title
                    </h1>
                    
                    <p></p>
                    
                    <section class="grid">
                        <div class="item">
                            #1
                        </div>
                        <div class="item">
                            #2
                        </div>
                        <div class="item">
                            #3
                        </div>
                    </section>
                    <p></p>
                </article>
            </section>
            <footer>
                <hr>
                <ul>
                    <li><small>Wayou &copy 2013|</small></li>
                    <li><small><a href="mailto:sample@somesite.com">Contact</a></small> </li>
                </ul>
            </footer>
        </div>
    </body>
</html>
複製代碼

 

文章內容填充

剩下文章部分須要填充點內容，正好MS Word有這樣一個產生隨機文章的彩蛋。使用方法是新建一個word文件而後打開輸入" =rand(3,10) " 再回車。其中rand 函數接收兩個參數，第一個表示要產生多少個天然段，第二個表示每段多少行。因此上面回車後咱們會獲得一篇由3個天然段組成的文章且每段有10行。

 

而後再另存爲網頁文件：

最後能夠在瀏覽器中經過查看源碼把包含內容的<p>標籤複製到咱們的代碼中便可。

同時這裏有一個專門產生填充內容的網站Fillerati。能夠定義篇幅，做者信息，標題等。

固然以上兩種做法多少有點裝逼與作做的感受，你徹底能夠隨便複製點什麼東西來做爲內容填充的 一_一|||。

填充內容後HTML變成這樣

複製代碼 
<section class="post">
    <article>
        <h1>
            Sample Title
        </h1>
        <p>
            Video provides a powerful way to help you prove your point. When you click Online
            Video, you can paste in the embed code for the video you want to add. You can also
            type a keyword to search online for the video that best fits your document. To make
            your document look professionally produced, Word provides header, footer, cover page,
            and text box designs that complement each other. For example, you can add a matching
            cover page, header, and sidebar. Click Insert and then choose the elements you want
            from the different galleries. Themes and styles also help keep your document coordinated.
            When you click Design and choose a new Theme, the pictures, charts, and SmartArt
            graphics change to match your new theme. When you apply styles, your headings change
            to match the new theme. Save time in Word with new buttons that show up where you
            need them.
        </p>
        <section class="grid">
            <div class="item">
                #1
            </div>
            <div class="item">
                #2
            </div>
            <div class="item">
                #3
            </div>
        </section>
        <p>
            To change the way a picture fits in your document, click it and a button for layout
            options appears next to it. When you work on a table, click where you want to add
            a row or a column, and then click the plus sign. Reading is easier, too, in the new
            Reading view. You can collapse parts of the document and focus on the text you want.
            If you need to stop reading before you reach the end, Word remembers where you left
            off - even on another device. Video provides a powerful way to help you prove your
            point. When you click Online Video, you can paste in the embed code for the video
            you want to add. You can also type a keyword to search online for the video that
            best fits your document. To make your document look professionally produced, Word
            provides header, footer, cover page, and text box designs that complement each other.
            For example, you can add a matching cover page, header, and sidebar.
        </p>
        <img class="illustration" src="beauty.png" title="sample pic" alt="beauty" />
        <p>
            Click Insert and then choose the elements you want from the different galleries.
            Themes and styles also help keep your document coordinated. When you click Design
            and choose a new Theme, the pictures, charts, and SmartArt graphics change to match
            your new theme. When you apply styles, your headings change to match the new theme.
            Save time in Word with new buttons that show up where you need them. To change the
            way a picture fits in your document, click it and a button for layout options appears
            next to it. When you work on a table, click where you want to add a row or a column,
            and then click the plus sign. Reading is easier, too, in the new Reading view. You
            can collapse parts of the document and focus on the text you want. If you need to
            stop reading before you reach the end, Word remembers where you left off - even on
            another device.
        </p>
    </article>
</section>
複製代碼

 

最後出來的效果看起來是這樣的：

最後爲了讓側邊欄更有意義一點，給文章正文加上一些子標題同時給側邊欄裏的元素加上錨點鏈接能夠在文章的子標題間進行導航。

複製代碼 
<aside>
    <ul>
        <li>
            <a href="#subtitle1">item1</a>
        </li>
        <li>
            <a href="#subtitle2">item2</a>
        </li>
        <li>
            <a href="#subtitle3">item3</a>
        </li>
        <li>
            <a href="#subtitle4">item4</a>
        </li>
        <li>
            <a href="#subtitle5">item5</a>
        </li>
    </ul>
</aside>
<section class="post">
    <article>
        <h1>
            Sample Title
        </h1>
        <p id="subtitle1">
            <strong> subtitle1 </strong>
        </p>
        <p>
            //正文被省略
        </p>
        <p id="subtitle2">
            <strong> subtitle2 </strong>
        </p>
        <section class="grid">
            <div class="item">
                #1
            </div>
            <div class="item">
                #2
            </div>
            <div class="item">
                #3
            </div>
        </section>
        <p>
            <p id="subtitle3">
                <strong> subtitle3 </strong>
            </p>
            //正文被省略
        </p>
        <p id="subtitle4">
            <strong> subtitle4 </strong>
        </p>
        <img class="illustration" src="beauty.png" title="sample pic" alt="beauty" />
        <p id="subtitle5">
            <strong> subtitle5 </strong>
        </p>
        <p>
            //正文被省略
        </p>
    </article>
</section>
複製代碼

 

基本的樣式

最後加上一些樣式讓整個頁面看起來更正常些。

咱們首先去掉body元素的默認外邊距，去掉列表元素前面默認的加點，把菜單裏的超鏈接的下劃線也去掉。

 

複製代碼 
body {
    margin: 0;
}

li {
    list-style: none;
}

/*navigation bar*/

nav {
    background-color: #333;
}

nav li {
    display: inline-block;
    padding-right: 10px;
}

nav li a {
    text-decoration: none;
    color: white;
    font-size: 1.5em;
}

nav li a:hover {
    color: #DDD;
}
複製代碼

 

再修飾下字體及正文中的三個方塊div以及其餘，最後的樣式代碼差很少是這樣的：

複製代碼 
html {
    font-family: "microsoft yahei",arial
}

body {
    margin: 0;
}

li {
    list-style: none;
}

/*navigation bar*/
nav {
    background-color: #333;
}

nav li {
    display: inline-block;
    padding-right: 10px;
}

nav li a {
    text-decoration: none;
    color: white;
    font-size: 1.5em;
}

nav li a:hover {
    color: #DDD;
}


/*sidebar*/
aside {
    width: 15%;
    float: left;
}

/*post*/
.post {
    width: 70%;
    margin: 0 auto;
    float: left;
}

 /*grid layout*/
.grid {
}

.grid .item {
    width: 25%;
    height: 150px;
    background-color: #DDD;
    display: inline-block;
}

 /*footer*/
footer {
    width: 100%;
    text-align: center;
    clear: both;
}

footer li {
    display: inline-block;
}
複製代碼

 

其中，由於側邊欄和文章向左浮動了，爲了讓頁腳不從最底跳到文章的後面跑到頂部去，要清除頁腳footer兩邊的浮動。

footer{
     width: 100%;
     text-align: center;
     clear:both;
 }

 

最後頁面看起來着很少是這個樣子的

動態加載樣式表

接下來的工做是讓頁面成爲響應式的。聽起來以爲是一個全新的領域，但其實平時咱們已經在實踐了。好比當指定元素的尺寸時，使用百分比而不是固定像素的大小時，這樣的元素就具有自適應屏幕的能力。最多見的就是指定元素寬度爲100%。這樣窗口縮放或屏幕不一樣時元素始終佔據屏幕整個寬度。

一些不太實用的實踐是針對不一樣屏幕尺寸加載不一樣的樣式表，這其實至關於爲不一樣尺寸寫不一樣的樣式表，感受維護起來不那麼方便。

<!-- CSS media query on a link element -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

代碼來自MDN

經過在引入樣式表時使用media屬性能夠控制什麼尺寸的屏幕使用哪一個樣式表，因而咱們能夠實現手機訪問時下載手機版樣式，電腦訪問時下載正常樣式。

<link rel="stylesheet" media="screen and (max-device-width: 320px)" href="mobile.css"/>

上面代碼指定若是設備寬度小於320px則調用 "mobile.css"樣式表。

我的以爲這樣爲一個站點寫多個分別的樣式表不怎麼好，因此這裏就很少說了。

Viewport

響應式設計第一件須要作的事情就是在head標籤裏指定viewport meta屬性。

《Quick Tip: Don't Forget the Viewport Meta Tag》這篇文章很好介紹了Viewport是的原因及做用。

簡單說來在手機（iPhone Safari）上訪問網頁時它默認會對網頁進行縮放，儘量多地在屏幕上展現整個頁面的內容。而縮放以後的效果可想而知，一個在電腦上正常展現的頁面被縮放進手機屏幕（一般是240*320）裏面後，很難閱讀。

同時因爲默認使用縮放，那麼你事先設計好的在小屏幕上使用的樣式將不起做用，也就是說手機上展現的是電腦版本的一個縮小版。

咱們看MDN上給出的例子截圖。

而在代碼中指定viewport，則可讓開發者指定網頁視圖區域及縮放比例等。這樣就能修正由瀏覽器自動縮放帶來的影響。

經過咱們指定以下代碼：

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

 

表示使用設備寬度（即設備的屏幕寬度）而且縮放指定爲1也就是不縮放。

你可能會問這樣指定以後豈不是隻能在手機屏幕上顯示網站的部分，好比左上角。這時候正是響應式網頁設計起做用的時候了。若是你專門爲小屏幕的訪問進行了優化好比在CSS中使用media屬性（後面會講到），那麼當手機訪問時會調用相應的樣式規則，而不會只顯示整個網站的一部分。

字體縮放

指定固定像素的字體大小是咱們設計中常用的方式，但若是你想字體大小更具彈性的話，最好仍是使用相對大小，CSS中比較經常使用的指定字體相對大小的單位有百分比，em以及CSS3新增的rem。

首先咱們指定整個文檔的字體大小爲100%。表示頁面字體大小爲瀏覽器默認大小的100%。

html {
    font-family: "microsoft yahei",arial;
    font-size: 100%;
}

 

再來看看em與rem。em單位一如他的發音它的基準單位是一個m字母的高度，同時它是指定相對於父級元素的相對大小。也就是說指定爲em的元素字體大小是經過對上一層元素的字體大小計算得來的。

<div style="font-size:15px;">
    <p style="font-size:2em;">
        Hello!
    </p>
</div>

 

上面外層div字體大小爲15px，同時指定內層p元素字體大小爲2em，因此p元素實際的字體大小爲15px*2=30px。這點能夠經過查看瀏覽器開發工具裏面"計算後的樣式"獲得證明。

但須要注意的是em有個問題，正由於他會相對於低級元素來計算本身的樣式，因此在層疊不少的狀況下，可能出現意料以外的結果。

複製代碼 
<div style="font-size:15px;">
    <div style="font-size:2em;">
        <p style="font-size:2em;">
            Hello!
        </p>
    </div>
</div>
複製代碼

 

好比咱們指望後面的包含在最外層div中的內容字體大小統一爲2em，因而分別在內層div和p上都指定了這同樣式，結果p元素的字體大小實際上是乘以了兩次以後的結果 15px*2*2=60px。

爲了解決這個問題，因而引入了一個新的單位rem。能夠理解爲root-em。加了個root前綴表示老是相對於根節點來計算。HTML文檔的根節點固然就是<HTML>標籤了。因此經過rem不管在文檔任何位置指定均可以放心地獲得預期的大小。

複製代碼 
<div style="font-size:15px;">
    <div style="font-size:2em;">
        <p style="font-size:2rem;">
            Hello!
        </p>
    </div>
</div>
複製代碼

 

若是沒有指定HTML根節點的字體大小，默認爲16px，因此這裏獲得32px。

但rem 不太普適，由於瀏覽器對它的支持力度還不夠，固然若是不考慮太多嵌套狀況下em就夠用了。因此我習慣在CSS中使用em來指定字體大小。

 

側邊欄

當縮放瀏覽器窗口到足夠窄（這裏是小於560px）時咱們能夠發現側邊欄與博客文章有重疊，此刻這個窗口寬度就是咱們須要寫樣式來干預的時候了。

利用CSS中的media query咱們指定當窗口小於630px時將側邊欄隱藏，而讓正文佔據整個屏幕寬度也就是設置爲100%，而且取消正文的浮動，由於沒有必要了。同時上圖咱們能夠看到此時的菜單並無受到影響因此暫時能夠無論。

 

複製代碼 
@media only screen and (max-width : 650px) {
    aside {
        display: none;
    }

    .post {
        width: 100%;
        float: none;
        padding: 5px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
}
複製代碼

 

另外爲了避免讓subtitle2部分的格子被壓得過小而影響其中的內容（固然如今其中並無什麼內容），因此此刻咱們讓這一部分一樣佔100%的寬度，其中每一個方塊佔32%的寬度。

複製代碼 
@media only screen and (max-width : 650px) {
    aside {
        display: none;
    }

    .post {
        width: 100%;
        float: none;
        padding: 5px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .grid {
        width: 100%;
    }

    .grid .item {
        width: 32%;
    }
}
複製代碼

 

 

導航菜單

菜單幾乎是體現響應式設計最直接的一個東西了。判斷一個網站是否是響應式的最好方法就是改變瀏覽器窗口的大小，觀察網站的佈局，特別是菜單，在窗口縮小到足夠窄的狀況下一個經典的設計是隱藏原來的菜單而只展現由三根橫線組成的圖標。

截圖站點http://residence-mixte.com/

由此咱們能夠看到一些實現上的端倪，除了常規菜單外，咱們須要在HTML代碼中事先擺放好這樣一個橫線圖標元素。

因此改動咱們的nav部分的HTML代碼爲下面這樣：

複製代碼 
<nav>
    <ul>
        <a href="#" id="menuIcon">Ξ</a>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Gallery</a>
        </li>
        <li>
            <a href="#">Forum</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
    </ul>
</nav>
複製代碼

同時補充上樣式：

複製代碼 
nav li a:hover,#menuIcon:hover {
    color: #DDD;
}

#menuIcon {
    display: none;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-decoration: none;
    font-family: arial;
}
複製代碼

 

此刻頁面倒並無明顯變化，由於這個圖標開始是不顯示的。

當窗口寬度小於大約490px時，咱們的菜單最後一項被擠到了下面一排，因此將500px這個寬度做爲分水嶺寫media query代碼。

當屏幕寬度小於500px時，<nav> 裏的菜單<ul>標籤不顯示，同時顯示id爲menuIcon的菜單圖標<a>標籤。

 

複製代碼 
@media screen and (max-width: 500px) {

    nav ul {
        display: none;
        padding: 0;
        margin: 0 5px;
    }

    #menuIcon {
        display: block;
        text-align: right;
        padding: 0 5px;
        border-bottom: 1px #9c9c9c solid;
    }
}
複製代碼

 

這時候咱們須要一點javascript代碼來實現點擊三根橫線顯示出來剛纔被咱們隱藏的菜單，同時再次單擊或者選中一個菜單項後從新隱藏菜單。

複製代碼 
<script type="text/javascript">
        $(function() {
            $("#menuIcon,nav ul li").click(function() {
                if ($("#menuIcon").is(":visible")) { //防止寬屏上點擊
                    $("nav ul").toggle(300);
                };
            });
        })
</script>
複製代碼

 

但這個時候菜單不夠完美，最後加上一點樣式美化下。

複製代碼 
@media screen and (max-width: 500px) {

    nav ul {
        display: none;
        padding: 0;
        margin: 0 5px;
    }

    #menuIcon {
        display: block;
        text-align: right;
        padding: 0 5px;
        border-bottom: 1px #9c9c9c solid;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li:hover {
        background-color: #555;
    }
}
複製代碼

 

 

目前來講工做得還算滿意，但稍微測試下就會發現個問題：當菜單被點開後又關閉，再將窗口拉寬到足夠寬時，正常模式的菜單不顯示了。

這裏給出個不太正規的解決方法，再寫點代碼監聽窗口的resize事件，當窗口大於咱們設定的500px時移除咱們經過jQuery的toggle函數給菜單<ul> 標籤加上的樣式"style="display:none;"，另外也能夠經過監聽那個三橫的菜單圖標是否可見也能夠達到目的。

複製代碼 
$(window).resize(function() {
    if (!$("nav ul").is(":visible")) {
        $('nav ul').attr('style', function(i, style){
            return style.replace(/display[^;]+;?/g, '');
        });
    };
});
複製代碼

 

圖片自適應

普通的圖片是不會自適應屏幕大小的，也就是說圖片太寬的話在手持設備等屏幕較小的狀況下會有水平滾動條出現。

最簡單的辦法讓它隨屏幕大小自動縮放就是指定其最大寬度爲100%像這樣：

img {
    max-width:100%;
}

 

 

其餘

再來處理窗口足夠小的時候那個表格式佈局的三個方框。

能夠看到窗口很窄的時候這三個div被擠壓得很厲害，因此假設窗口小於420px時，咱們讓它們各自獨立一行，佔滿整個窗口寬度。

@media screen and (max-width: 420px) {
    .grid .item {
        width: 100%;
        margin-bottom: 5px;
    }
}

 

總結

本文中不少例子不是很恬當，僅用於演示教學，請輕噴。好比將菜單變成圖標顯示時上面例子是在500px爲分水嶺寫的media queries，但咱們知道500px其實仍是很寬的，是足以容下通常長度的菜單正常顯示的，只是在通常手機屏幕寬度480px 或320px，因此針對這個寬度來寫media query更具實際意義。還有就是側邊欄，上面例子中使用的百分比寬度，其實側邊欄能夠給個固定寬度，而且上面例子中沒有考慮到側邊欄裏的文字很長的狀況。沒有考慮到老版本IE不支持media query的狀況。這些是例子中不足的地方。但做爲演示仍是達到了我講解的目的。

 

示例代碼：ResiponsiveDesign.zip

 

參考與擴展閱讀:

  1. 1.Responsive Web Design Guidelines and Tutorials
  2. 2.一個響應式頁面測試站點
  3. 3.Using the viewport meta tag to control layout on mobile browsers
  4. 4.Responsive Web Design: What It Is and How To Use It
  5. 5.viewport 相關
  6. 6.Responsive Design with CSS3 Media Queries 的系列文章
  7. 7.How To Create A Responsive Navigation
  8. 8.Adventures in Responsive Navigation
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程