响应网格布局相对于屏幕尺寸

Question

我在下面列出了我的设计要求 -

1. 我正致力于创建相对于屏幕尺寸的响应式网格布局。与附加图像

类似

2. 如果用户调整屏幕大小，则网格应自行调整（高度和宽度）以占用屏幕大小。技术上网格应该占据整个屏幕而没有垂直滚动条。

3. 以上条件＃2仅适用于台式机和平板电脑设备。对于其他屏幕，网格将表现得像普通的响应式布局（即使用垂直滚动条显示整个内容）

4. 有人可以指导我如何使用jQuery插件或类似的东西来实现上述要求。

Answer 1

我已经使用过网格方法尝试这个，它可能适合你， 对于响应式方法，添加媒体查询，然后根据需要更改列宽

＆＃13;

＆＃13;

* { /*this border-box property will affect IE7 browsers */
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.wrapper{
    float: left;
	width: 100%;
}
/*for the box visibily purose only i have added this */
.wrapper  div.inner {
    background: #ccc;
    border: soild 1px #aaa;
    min-height: 100px;
    margin-bottom: 10px;
}
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c1-5, .c1-8 {
	min-height: 1px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
}
.c1 { width: 8.33% }
.c2 { width: 16.66% }
.c3 { width: 25% }
.c4 { width: 33.33% }
.c5 { width: 41.66% }
.c6 { width: 50% }
.c7 { width: 58.33% }
.c8 { width: 66.66% } 
.c9 { width: 75% }
.c10 { width: 83.33% }
.c11 { width: 91.66% }
.c12 { width: 100% }
.c1-5 { width: 20% }

＆＃13;

<div class="wrapper">
    <div class="content c8">
        <div class="inner"></div>
    </div>
    <div class="sidebar c4">
        <div class="inner"></div>
    </div>
</div>
<!-- Three even columns -->
<div class="wrapper">
    <div class="content c4">
        <div class="inner"></div>
    </div>
    <div class="sidebar c4">
        <div class="inner"></div>
    </div>
    <div class="sidebar c4">
        <div class="inner"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你必须在jQuery和window.resize中定义宽度和高度 find fiddle demo here

HTML：               

<div class="col col30 bgblue"></div>
<div class="col col40 bggold"></div>
<div class="col col30 bgblack"></div>

<div class="col col30 bggreen"></div>
<div class="col col30 bgpink"></div>
<div class="col col40 bgred"></div>

CSS：

body{
margin:0;
padding:0;
background:grey;
}
.col{
float:left;
}
.bgred{
background:red;
}
.bggreen{
background:green;
}
.bgpink{
background:pink;
}
.bgblue{
background:blue;
}
.bggold{
background:gold;
}
.bgblack{
background:black;
}

的jQuery *：

function screen(){
var $w = $(window).width()*0.44; 
var $w2 = $(window).width()*0.28; 
var $h = $(window).height()/3; 
$('.col').css({'height': $h +'px'});
$('.col40').css({'width': $w +'px'});
$('.col30').css({'width': $w2 +'px'});
}

screen();
$(window).resize(function(){
 screen();
});