jquery - Responsive Grid Layout Relative to Screen Size -
i have listed design requirements below -
i'm working on creating responsive grid layout relative screen size. similar attached image
if user resize screen, grids should adjust (both in height , width) occupy screen size. technically grids should occupy entire screen without vertical scroll bars.
above condition #2 applicable desktop , tablet devices. other screen grid behave normal responsive layouts (i.e vertical scroll bar display entire content)
can please guide me how implement above requirement using jquery plugin or similar.
you have define width , height in jquery , in 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(); });
Comments
Post a Comment