Отзывчивый Grid Layout Относительно размер экрана

Question

Я перечислил свои требования к конструкции ниже -

1. Я работаю над созданием гибкой компоновкой сетки относительно размера экрана. Аналогично прилагаемому изображению

2. Если пользователь изменил размер экрана, то сетки должны отрегулировать себя (по высоте и ширине), чтобы занять размер экрана. Технически решетки должны занимать весь экран без вертикальных полос прокрутки.

3. Выше условия №2 применимы только для настольных и планшетных устройств. Для другого экрана сетка будет вести себя как нормальные ответные макеты (т. Е. С вертикальной полосой прокрутки для отображения всего содержимого).

4. Может ли кто-нибудь мне посоветовать, как реализовать вышеуказанное требование с помощью плагина jQuery или чего-то подобного.

Answer 1

Вы должны определить ширину и высоту в 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(); 
}); 

Answer 2

Я использовал Сетка Вид подхода попробовать это, он может работает для вас, Для Отзывчивый подхода добавить медиазапросы и чем изменить ширину колонок, что вы хотите

* { /*this border-box property will affect IE7 browsers */ 
 
\t box-sizing: border-box; 
 
\t -ms-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
} 
 
.wrapper{ 
 
    float: left; 
 
\t 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 { 
 
\t min-height: 1px; 
 
\t float: left; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t 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% }

<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>