Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Media Query ile ilgili örnekler yapacağız.
Bu dersimizde media query kullanmanın birkaç örneğine daha bakalım.
Media queryler, farklı cihazlara uyarlanmış bir stil sayfası sunmak için popüler bir tekniktir. Basit bir örnek göstermek için farklı cihazlar için arka plan rengini değiştirebiliriz:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: tan;
color: black;
}
/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
color: white;
}
}
/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
color: white;
}
}
</style>
</head>
<body>
<h1>Etkisini görmek için tarayıcı penceresini yeniden boyutlandırın!</h1>
<p>Varsayılan olarak, belgenin arka plan rengi "tan rengi"dir. Ekran boyutu 992 piksel veya daha az ise, renk "mavi" olarak değişecektir. 600px veya daha az ise "zeytin" olarak değişecektir.</p>
</body>
</html>
Bu örnekte, tasarımı farklı ekran boyutlarına göre değişen responsive bir menü oluşturmak için media queryleri kullanıyoruz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Menü Yapımı</h2>
<p>Efekti görmek için tarayıcı penceresini yeniden boyutlandırın: Ekran 600 pikselden küçük olduğunda, gezinme menüsü yatay yerine dikey olarak görüntülenecektir.</p>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</body>
</html>
Media querylerin yaygın bir kullanımı, esnek bir düzen oluşturmaktır. Bu örnekte, farklı ekran boyutlarına bağlı olarak dört, iki ve tam genişlikte sütun arasında değişen bir düzen oluşturuyoruz:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Kolonlar</h2>
<p><strong>Responsive efekti görmek için tarayıcı penceresini yeniden boyutlandırın.</strong> 992 piksel veya daha az genişlikteki ekranlarda, sütunlar dört sütundan iki sütuna yeniden boyutlandırılacaktır. 600 piksel veya daha az genişlikteki ekranlarda sütunlar yan yana değil üst üste yığılır.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Sütun 1</h2>
<p>Lorem Ipsum.</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Sütun 2</h2>
<p>Lorem Ipsum.</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Sütun 3</h2>
<p>Lorem Ipsum.</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Sütun 4</h2>
<p>Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
Media querylerin diğer bir yaygın kullanımı, farklı ekran boyutlarındaki öğeleri gizlemektir:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: yellow;
padding: 20px;
}
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
</style>
</head>
<body>
<h2>Öğeleri farklı ekran boyutlarında gizleyin</h2>
<div class="example">Örnek DIV.</div>
<p>Tarayıcının genişliği 600 piksel veya daha az olduğunda, div öğesini gizleyin. Efekti görmek için tarayıcı penceresini yeniden boyutlandırın.</p>
</body>
</html>
Media Queryler, tarayıcının yönüne bağlı olarak bir sayfanın düzenini değiştirmek için de kullanılabilir.
Yalnızca tarayıcı penceresi yüksekliğinden daha geniş olduğunda uygulanacak bir dizi CSS özelliğine sahip olabilirsiniz, buna "Yatay" yani Landspace yönlendirme denir:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Tarayıcı penceresini yeniden boyutlandırın. Bu belgenin genişliği yükseklikten büyük olduğunda, arka plan rengi "açık mavi", aksi takdirde "açık yeşil" olur.</p>
</body>
</html>
Minimum genişlik ve maksimum genişlik ayarlamak için (max-width: ..) ve (min-width: ..) değerlerini de kullanabilirsiniz.
Örneğin, tarayıcının genişliği 600 ile 900 piksel arasında olduğunda, bir div etikietinin görünümünü değiştirelim:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
</style>
</head>
<body>
<h2>DIV'nin görünümünü farklı ekran boyutlarında değiştirin</h2>
<div class="example">Örnek DIV.</div>
<p>Tarayıcının genişliği 600 ile 900 piksel arasında olduğunda, DIV'nin görünümünü değiştirin.
<strong>Efekti görmek için tarayıcı penceresini yeniden boyutlandırın</strong>.</p>
</body>
</html>
Ek koşul eklemek : Aşağıdaki örnekte, virgül kullanarak zaten mevcut olan sorgumuza ek bir sorgu ekleyebiliyoruz. (VEYA operatörü gibi) :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example{
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
</style>
</head>
<body>
<h2>DIV'nin görünümünü farklı ekran boyutlarında değiştirin</h2>
<div class="example">Örnek DIV.</div>
<p>Tarayıcının genişliği 600 ile 900 piksel arasında VEYA 1100 pikselin üzerinde olduğunda, DIV'nin görünümünü değiştirin.
<strong>Efekti görmek için tarayıcı penceresini yeniden boyutlandırın</strong>.</p>
</body>
</html>