Duyarlı (Responsible) Tasarım Uygulamaları
Örnek 1
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="1.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><img src="3.jpg" id="kfoto"></div>
<div><img src="2.jpg" id="ofoto"></div>
<div><img src="1.jpg" id="bfoto"></div>
</body>
</html>
<html lang="en">
<head>
<link rel="stylesheet" href="1.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><img src="3.jpg" id="kfoto"></div>
<div><img src="2.jpg" id="ofoto"></div>
<div><img src="1.jpg" id="bfoto"></div>
</body>
</html>
*{
margin: 0%;
padding: 0%;
}
#kfoto{
float: right;
height: 60px;
width: auto;
}
#ofoto{
float: right;
height: 120px;
width: auto;
}
#bfoto{
float: right;
height: 240px;
width: auto;
}
@media screen and (min-width:500px)
{
#kfoto{display: inline;}
#ofoto{display:none;}
#bfoto{display:none;}
}
@media screen and (min-width:800px)
{
#bfoto{display:none;}
#ofoto{display:inline;}
#kfoto{display: none;}
}
@media screen and (min-width:1200px)
{
#bfoto{display:inline;}
#ofoto{display:none;}
#kfoto{display: none;}
}
margin: 0%;
padding: 0%;
}
#kfoto{
float: right;
height: 60px;
width: auto;
}
#ofoto{
float: right;
height: 120px;
width: auto;
}
#bfoto{
float: right;
height: 240px;
width: auto;
}
@media screen and (min-width:500px)
{
#kfoto{display: inline;}
#ofoto{display:none;}
#bfoto{display:none;}
}
@media screen and (min-width:800px)
{
#bfoto{display:none;}
#ofoto{display:inline;}
#kfoto{display: none;}
}
@media screen and (min-width:1200px)
{
#bfoto{display:inline;}
#ofoto{display:none;}
#kfoto{display: none;}
}
Yorumunuzu Ekleyin
