Connect教程系列--響應式佈局(一)

微軟終於跨平臺了，最近在第九頻道（Event—Visual Studio）下面出來一系列關於vs2015的視頻，介紹vs2015以及.NET5.0的新特性等，現針對其講解的.NET和ASP.NET，進行介紹。

本篇課程主要是爲了介紹vs2015開發響應式web更具便捷性，經過藉助bootstrap，開發出適應平板、手機、PC等各類屏幕的漂亮頁面。同時還介紹了w3c新引入的picture標籤，以及CSS Media Queries。

一、bootstrap

經過使用bootstrap，構建以下一個界面，就很是簡單了。

只須要在引入bootstrap樣式後，加入以下元素便可。

<div class="container">
        <header class="page-header">
            <h1>響應式頁面設計</h1>
        </header>
        <div class="row">
            <p class="col-sm-4">
                我一直沒法熱愛巴赫，聽了不少次，喜歡他零星的幾個做品，但總體來講，我不着迷巴赫。
                世界上成千上萬的人愛極了巴赫，我知道巴赫是有魔力的，只不過我尚未發現。我想，那我就等時機吧。若是有緣，我會愛上他。若是他必定要躲着我，藏在雲霧繚繞的濃霧後，我也沒辦法。
            </p>
            <p class="col-sm-4">
                我喜歡一瀉千里的音樂，好比斯美塔那的《個人祖國》。我喜歡悽美絕倫，要死要活的音樂，好比《皮爾金特組曲》裏的「索爾維格之格」。我喜歡老柴，貝多芬，拉赫馬尼諾夫，和一些現代的做曲家，好比約翰.威廉姆斯。我喜歡心裏的自由，心帶着情感馳騁千里。
            </p>
            <p class="col-sm-4">
                就是這樣不刻意地，在優酷裏看到紀錄片《朱曉玫與哥德堡變奏曲》，一如既往，邊作事邊聽，詠歎調輕嫋飄來，我正在熨頭髮的雙手在空中僵住了...........??? 這天籟之聲哪裏來？盯住電腦的屏幕使勁看，高山小溪，白雪皚皚，朱曉玫在夜晚的雪路里，走向巴赫時代建造的山村小屋。那裏有一隻貓，她在安靜的冬夜彈《哥德堡變奏曲》。
            </p>
        </div>
    </div>

二、picture標籤

picture標籤，包含了img和source元素，可讓設計者根據屏幕像素等方便的控制顯示哪些元素。

代碼以下：

            <picture>
                <source media="(max-width:465px)" srcset="~/img/file-small.png" />
                <source media="(max-width:750px)" srcset="~/img/file-middle.png" />
                <img src="~/img/file.png" />
            </picture>

上面代碼的做用即便能夠根據屏幕寬度的大小，來顯示不一樣的圖片，默認是file圖片，當寬度小於750px大於450px時，就會

顯示file-middle圖片，當屏幕寬度小於465px時，就會顯示file-small圖片。

三、css media queries

css media queries做用是容許咱們在不改變內容的狀況下，改變頁面的佈局以精確適應不一樣的設備，是響應式設計的必備，在

上述代碼中 咱們也有看到 source裏，有media的定義。

相比以前的vs2012，在css文件中輸入media，會智能感應出不少設備，包括蘋果手機、平板、桌面等，以下截圖