Sercan Aslan Kişisel Blog
css3

CSS Responsive Mantığı ve Basit Responsive Örnekleri

Kelime tanımlarından çok basit örneklendirmeler ve Responsive'in çalışabilmesi için gerekli bazı kodlardan bahsettim. Örneklendirmeler ile Responsive mantığını anlayabilirseniz kendinizi geliştirmeniz daha kolay olacaktır. Çünkü Responsive, aslında tamamen CSS'i iyi bilmekle alakalı bir konudur.



Öncelikle sayfamızın duyarlı hale gelmesi için, html kodları içerisinde kullanmamız gereken meta etiketinden bahsedeyim.


<meta name="viewport" content="" />

Bu etiketin sayfanın <head></head> kodları arasında mutlaka bulunması gerekiyor. Tabi content kısmının boş olduğunu farketmişsinizdir. Şimdi bu kısma gelebilecek özelliklerden bahsedelim. Boş bırakırsanız zaten çalışmayacaktır.

width Sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlar. Biz width=device-width şeklinde bir kullanımı vardır.

height Sayfanın ekran yüksekliğine göre duyarlı hale gelmesini sağlar. Bazı sıradışı istekler dışında pek kullanılmayan bir özelliktir.

initial-scale Sayfa gösterilirken ölçeklendirmeye yarar. initial-scale=1.0 şeklinde bir kullanımı vardır. 1.0 değeri ölçeklendirme yapılmamasını sağlar. 0 ve 10.0 arasında bir değer alabilir.

user-scalable Sayfayı görüntüleyen kişinin zoom veya ölçekleme yapıp yapamayacağını belirleyebileceğiniz özelliktir. yes veya no değerlerini alır. user-scalable=no şeklinde bir kullanımı vardır.

maximum-scale Sayfayı görüntüleyen kişinin yapabileceği maksimum zoom in yani yakınlaştırma-büyültme oranını belirlemenizi sağlar. maximum-scale=1.0 şeklinde bir kullanımı vardır.

minimum-scale Sayfayı görüntüleyen kişinin yapabileceği maksimum zoom out yani uzaklaştırma-küçültme oranını belirlemenizi sağlar. minimum-scale=1.0 şeklinde bir kullanımı vardır.



Şimdi de çözünürlüğe göre CSS kodları belirleyebileceğimi @media özelliğimizden bahsedelim.


@media only screend and (max-width:959px) { }


Bu şekilde ekran çözünürlüğüne göre CSS kodlarını belirleyebiliriz. Bu kullanımda 959px veya daha düşük ekran genişliğine sahip cihazlar için CSS kodları belirlenebilir.

only Sadece belirlenen şartlar geçerli ise parantez içine girilen CSS kodlarını çalıştırmayı sağlar.

screen Ekran anlamına gelir. Herhangi bir ekran olma zorunluluğunu belirtir.

and Her şeyde olduğu gibi birleştirici anlamı vardır. Belirlenen özellikleri birleştirmeye yarar. and (max-width:959px) and (min-width:960px) şeklinde bir kullanım yapılabilir.

max-width Maksimum genişlik değerine kadar olan ekranları seçmenizi sağlar. (max-width: 959px) şeklinde kullanımı vardır ve 959px den daha küçük ekran genişliğine sahip cihazlara özel CSS kodu belirlemenizi sağlar.

min-width Minimum genişlik değerine kadar olan ekranları seçmenizi sağlar. (min-width: 959px) şeklinde kullanımı vardır ve 959px den daha büyük ekran genişliğine sahip cihazlara özel CSS kodu belirlemenizi sağlar.



Html kısmında kullandığım kodlar


<!doctype html>
<html lang="tr">
<head>
    <title>LOREM IPSUM</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="LOREM IPSUM">
    <meta name="author" content="SitePoint">
    <meta name="keywords" content="LOREM IPSUM">
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

    <div class="ornek1">
        Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet. 
		Lorem ipsum dolor sit amet.
    </div>
    
</body>
</html>


CSS kısmında kullandığım kodlar


body {
	margin:0;
	padding:0
}

@media only screen and (min-width:960px) {
	
.ornek1 {
	width:500px;
	height:400px;
	background:#666;
	color:#fff;
	font-family: Arial;
	margin:0 auto;
	margin-top:30px;
	padding:20px
}

}

@media only screen and (min-width:769px) and (max-width:959px) {
	
.ornek1 {
	width:700px;
	background:yellow;
	color:#fff;
	font-family: Arial;
	margin:20px;
	padding:20px
}

}

@media only screen and (max-width:768px) {
	
.ornek1 {
	background:red;
	color:#fff;
	font-family: Arial;
	margin:20px;
	padding:20px
}

}


Demoİndir