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，会智能感应出不少设备，包括苹果手机、平板、桌面等，以下截图