所谓响应式页面，就是在不同设备，不同分辨率下，显示不同的内容以及不同的样式布局.
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
今天研究了一下使用Bootstrap来做一个响应式的页面，代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>一个响应式布局的演示</title>
</head>
<body>
<div class="container">
<div class="visible-desktop mr" id="hold">大屏幕</div>
<div class="hidden-phone mr" id="hold">平板电脑和小屏电脑之间</div>
<div class="hidden-desktop mr" id="hold">横向放置的手机和竖向放置的平板之间的分辨率</div>
<div class="visible-phone mr" id="hold">横向放置的手机及分辨率更小的设备</div>
</div>
</body>
</html>
CSS如下：
@charset "utf-8";
/* 响应式布局浏览 */
/* 大屏幕 */
.mr {margin:0 auto;}
@media (min-width: 1200px) {
#hold{
background:#000;
color:#fff;
width:500px;
height:400px;}
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
#hold{
background:#960;
width:500px;
height:400px;}
}
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) {
#hold{background:#609;
width:500px;
height:400px;}
}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
#hold{background:#9C9;
width:500px;
height:400px;}
}
大家可以自己试一下在不同设备下浏览的页面，样式发生了改变！
这只是一个demo而已，通过以上这样的布局方式可以很轻松拿下IPAD、手机、电脑的不同布局，而不用针对每一个不同的版本来写不同的源码。
评论 (0)