Connect教程系列--响应式布局(一)

微软终于开源了，最近在第九频道（Event—Visual Studio）下面出来一系列关于vs2015的视频，介绍vs2015以及.NET5.0的新特性等，现针对其讲解的.NET和ASP.NET，进行介绍。

本篇课程主要是为了介绍vs2015开发响应式web更具便捷性，通过借助bootstrap，开发出适应平板、手机、PC等各种屏幕的漂亮页面。同时还介绍了w3c新引入的picture标签，以及CSS Media Queries。

1、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>

2、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图片。

3、css media queries

css media queries作用是允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备，是响应式设计的必备，在

上述代码中 我们也有看到 source里，有media的定义。

相比之前的vs2012，在css文件中输入media，会智能感应出很多设备，包括苹果手机、平板、桌面等，如下截图