[[极客]] 一个超级简单的响应式页面

digest icon 4242 2

所谓响应式页面,就是在不同设备,不同分辨率下,显示不同的内容以及不同的样式布局.

    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、手机、电脑的不同布局,而不用针对每一个不同的版本来写不同的源码。



认证信息  


菲布理の棒棒糖(uid:1260) 2015-05-11  楼主 回复 收藏1

论坛社区的响应式就是采用了Bootstrap的方法制作的。


认证信息  管理员安全证明实名认证妹子认证身份认证云工作室创始人


稗田型幽幽子(uid:1) 2015-05-11  沙发 回复

咱版第一个非版主的帖子


认证信息  


纸盐(uid:1162) 2015-05-11  板凳 回复