Tuesday 9 July 2013

Setting breakpoints for responsive design

CSS Code


body { margin-top: 100px; }
div {
float: left;
margin-right: 1em;
padding: 1em 1.5em;
background: #bada55;
cursor: pointer;
}

@media screen and (max-width: 1024px) {
div { background: red }
}

@media screen and (max-width: 768px) {
div { background: yellow }
}

@media screen and (max-width: 480px) {
div { background: cyan }
}

@media screen and (max-width: 320px) {
div { background: pink }
}

JAVASCRIPT CODE


function isBreakPoint(bp) {
var bps = [320, 480, 768, 1024];
var w = $(window).width();
var min, max;
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0;
max = bps[i];
break;
}
}
return w > min && w <= max;
}

$('div').click(function(){

alert(
isBreakPoint(320) && 'Smartphone' ||
isBreakPoint(480) && 'Big Smartphone' ||
isBreakPoint(768) && 'Tablet' ||
isBreakPoint(1024) && 'Desktop' ||
'Big Desktop'
);

});

HTML CODE


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Check Responsive</title>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
</body>
</html>


Setting breakpoints for responsive design

No comments:

Post a Comment