Zeki Can - WordPress
Siteyi CSS ile Mobil Uyumlu Responsive Yapma
Merhaba Arkadaşlar, Mobil uyumlu bir tasarım yapmaya devam ediyoruz bu konumuzda. Önceki konumuzu okumayan arkadaşlar lütfen ilk konumuzu okuyup sonra bu konumuzdan devam etsinler. Aksi taktirde anlattıklarımı tam anlamayabilirler. İlk konumuz: Siteyi Mobil Uyumlu Responsive Yapma
İlk konumuzda responsive özelliğimizi sitemize tanımlamıştık. Şimdi css kısımlarına geçeceğiz. Önce koddaki kavramların ne anlama geldiğine bakalım beraber.
@media only screend and (max-width:959px) {
.zekicannet .css kodlarımız buraya gelecek
}
Yukarıda tanımladığım kodu style.css dosyanızda uygun bir yere yapıştırın. En alta ekleyebilirsiniz.
Bu kullanımda 959px veya daha düşük ekran genişliğine sahip cihazları kullanıp girenler için CSS kodlarımızı hazırlayacağımız alanı belirtir. Parentezler içine maximum 959px ve altı çözünürlük kullanan kişiler için sitemizdeki bileşenlerimizin hangi boyutta olacağını belirteceğiz.
only Sadece belirlenen şartlar geçerli ise parantez içine girilen CSS kodlarını çalıştırmayı sağlayan kodmuzdur. Burda sadece maximum 959 pixel için uygula anlamına gelmektedir.
screen Ekran anlamına gelmektedir. Herhangi bir ekran olma zorunluluğunu belirtmektedir.
and Ve anlamına gelmektedir. Belirlenen özellikleri birleştirmeye yarar. Çift çözünürlük aralığı belirlenmek istendiğinde kullanılabilir. and (max-width:959px) and (min-width:960px) şeklinde bir kullanım da yapılabilir.
max-width Maksimum genişlik değerini belirlememize yarar. (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ğlayan kodumuzdur.
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 bu kod ile yapar.
Örnek bir html üzerinde görünüme bakalım.
Html için kullanmanız gereken kodlar.
<!doctype html>
<html lang="tr">
<head>
<title>ZekiCan.Net</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="ZekiCan.Net">
<meta name="author" content="Wordpress-Blog-Android-Teknoloji">
<meta name="keywords" content="ZekiCan.net">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="box-pad">
ZekiCan.Net ZekiCanTema Responsive Website Yapımı Denemesi
</div>
</div>
</body>
</html>
Css kodlarımızıda aşağıdaki gibi yapalım.
@media only screen and (max-width: 959px) {
.zekicannoktanet
.box {
background-color: #333;
font-family: 'Source Sans Pro', Tahoma;
font-size:18px;
font-weight:600;
color:#fff;
width:100%;
margin:0 auto;
margin-top:100px
}
.box-pad {
padding:20px
}
}
@media only screen and (min-width: 960px) {
.box-pad {
padding:0
}
.box {
background-color: #333;
font-family: 'Source Sans Pro', Tahoma;
font-size:18px;
font-weight:600;
color:#fff;
padding:20px;
width:900px;
margin:0 auto;
margin-top:100px
}
}
body {
padding:0;
margin:0
}
Verdiğim kodları bir web sayfasında açtığınızda mobil sürümde nasıl görüneceğini test etmek için web tarayıcınızın Kapat tuşu ile Simge durumunda küçül tuşu arasında kalan Pencere küçülte tıklayın. Genişliğini tarayıcının küçültün. Ekrandaki değişimi izleyin. Mantığı aktarmaya çalıştım sizlere. Daha detaylı bir örnekle işleyeceğim önümüzdeki konularda.
Etiketler : Css, Görünüm, Mobil, Mobil Uyumlu Site Yapımı, Nasıl Mobil Uyumlu Yapılır?, Responsive, Responsive Tema, Responsive Tema Yapımı, Siteyi Mobil Uyumlu Yapma, Website, WordPress Mobil Uyumlu Yapma
