You can download the Project ResponsiveRabbit from:
As I mentioned in an another article, I used CSS from ResponsiveRabbit to create mobile version of web-sites. http://www.justetc.net and http://www.justetc.org both have a mobile version. For resolution < 768 px the mobile responsive version is displayed. In the mobile version, the top menu is squeezed to the top. The width of the menu also changes based on screen resolution. For > 400 px width, menu width is 300px. At one point the width becomes 250, then 200, and then 150. It could be made percentage. However, based on the web-site structure, it could be little tricky/not-straight forward. So took the easier but more css codier way…
For mobile versions, the carousals are taken off, some of the box items are shown as plain text links. As for mobile version, the contents breakdown and arrange them one under another.
the css files, style.css the default mobile version; shown for width <= 767px.
style_desk.css is the desktop version shown for width >= 768px
responsive.css have the css classes that will be responsive
bootstrap-responsive.css has the media queries and defines the behavior for different resolutions
Some css from bootstrap-responsive.css
@media (max-width: 767px) {
/*sayed block starts */
#actualNavBar{
display: none;
}#responseNavBar{
position:absolute;
top:0px;
}.slider, .pagination{
display: none;
}.slider:after{
clear: both;
}
.box{
float:right;
padding:5px;
}
.nav-collapse{
max-width: 300px;
min-width: 300px;
float:right;
}
.container-fluid{
max-width: 50px;
float: right;
}
.navbar-inner{
width:40px;
height:40px;
float: right;
}
/*sayed block ends */
From style_desk.css
#responseNavBar{
float:right;
position:absolute;
top:0px;
display: none;
}#actualNavBar{
display: block;
}
/*sayed block starts*/
/*251 to 400px*/
@media (max-width: 400px) {
.nav-collapse{
max-width: 250px;
min-width: 250px;
float:right;
}
}
/*201 to 250*/
@media (max-width: 250px) {
.nav-collapse{
max-width: 200px;
min-width: 200px;
float:right;
}
}/*0 to 200*/
@media (max-width: 200px) {
.nav-collapse{
max-width: 150px;
min-width: 150px;
float:right;
}
}/*sayed block ends*/
I was looking for research work that eventually led to this CSS Media Queries, and responsive design…there must be some.. will see..now attaching one as I found…[not directly related …]
Responsive design in Higher Education
From: http://sitestree.com/?p=514
Categories:Web Development, Root, By Sayed Ahmed
Tags:
Post Data:2013-11-05 05:09:07
