Şimdi arkadaşlar responsive tasarım yapıyorum ve yaparken bi sorun yaşadım @media query ile eğer tarayıcı boyutu 600px olursa divlerimin boyutuda 600px olsun ve alt alta gelsin dedim buraya kadar sorun yok alt alta geliyor ama sağda bir scrollbar çıkıyor ve biraz uzuyor, divlerim 600px tarayıcının boyutuda 600px olduğuna göre scrollün çıkmaması gerekiyordu, peki neden çıktı ?
Kodlarım aşağıdadır;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="animate.min.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
body{padding:0;margin:0;}
div{
width:150px;
height:30px;
border:1px solid #ccc;
border-radius:3px;
padding:10px;
font:12px sans-serif;
margin:10px;
float:left;
}
@media screen and (max-width:600px){
body {padding:0;margin:0;}
div {width:600px;height:20px;float:none;}
}
</style>
</head>
<body>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
<div>Bu bir denemedir</div>
</body>
</html>