首页 > 代码库 > Connect教程系列--响应式布局(一)
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，会智能感应出很多设备，包括苹果手机、平板、桌面等，如下截图
Connect教程系列--响应式布局(一)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。