Bir önceki yazımda yüzdelik kullanarak responsive birşeyler yapmıştık (şurada). Ama bize daha fazlası gerekiyor. Bu yüzden media query lerine gireceğiz.
Media Queries Nedir?
Bunlar adı üstünde sorgular. Yani belirli bir görünüm cinsine göre bir elemana birden fazla css atayabilmenize sağlıyor. Mesela bir sayfayı print ederken farklı bir görüntü normal siteyi görüntülerken farklı bir görüntü isteyebilirsiniz. O zaman bunu yapalım :); Öncelikle sitemi tasarlıyorum:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="icerik">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus ut nunc ultrices suscipit. Quisque id mattis tortor. Morbi quis tortor at lectus feugiat tincidunt. Curabitur pretium urna diam, nec scelerisque dui porttitor in. Praesent ipsum turpis, mattis id egestas eget, ultrices vitae est. Fusce pharetra, augue quis suscipit egestas, enim risus lacinia quam, vitae iaculis lacus libero id sapien. In venenatis magna vitae eros viverra tristique. Nulla facilisi. Duis id vulputate neque. Sed auctor dui sed nunc gravida fermentum. Fusce hendrerit metus vitae turpis luctus malesuada. Fusce vel mi at risus ullamcorper accumsan in ac nisl. Quisque dapibus nunc sed massa iaculis sollicitudin eget non metus. Pellentesque pellentesque purus posuere vestibulum sodales. Nullam erat elit, congue a ligula in, semper mollis orci.
</p>
</div>
</body>
</html>
Mükemmel derecede normal bir web sitesi. Şimdi CSS’i (style.css sayfasını) yazıyorum:
/* normal ekranda bu cssler uygulanacak */
@media screen {
h1 {
background-color: red;
}
p {
background-color: grey;
font-family: tahoma;
}
}
/* print ekranında bu cssler uygulanacak */
@media print {
h1 {
font-family: Helvetica;
}
p {
font-family: Helvetica;
}
}
Görüntüler:
Normal Ekran
print alma ekranı
Ekran Boyutlarına Göre Ayarlama
Şimdi ekran boyutlarına göre 3 farklı css tasarlayacağız.
- Normal bilgisayarlar için
- Tabletler için
- Cep telefonları için
Tabi siz bunu daha da çeşitlendirebilirsiniz. Mesela cep telefonu modeline göre diye. Ama bence gerek yok. Şimdi 3 kolonlu bir site tasarlayacağım burada css’in display’lerini bilmeniz çok önemli. Eğerki hala bilmiyorsanız şuradaki yazıma bir göz atın.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
/* tüm görünümlerde padding olsun */
.sag, .sol, .orta {
padding: 10px;
margin: 0px;
}
/* cep telefonları için tüm kolonlar alt alta olacak */
@media screen and (max-width: 480px) {
.sag, .orta, .sol {
display: block;
}
}
/*
tabletler için
en son div'i alta alacağım
diğerleri yan yana kalacak
*/
@media screen and (min-width: 481px) and (max-width: 1000px) {
.sag, .orta {
display: inline-block;
width: 45%;
}
.sol {
display: block;
}
}
/*
Masaüstü bilgisayarlarda hepsi yan yana
*/
@media screen and (min-width: 1001px) {
.sag, .orta, .sol {
display: inline-block;
width: 30%;
}
}
html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="sag">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus ut nunc ultrices suscipit. Quisque id mattis tortor. Morbi quis tortor at lectus feugiat tincidunt. Curabitur pretium urna diam, nec scelerisque dui porttitor in. Praesent ipsum turpis, mattis id egestas eget, ultrices vitae est. Fusce pharetra, augue quis suscipit egestas, enim risus lacinia quam, vitae iaculis lacus libero id sapien. In venenatis magna vitae eros viverra tristique. Nulla facilisi. Duis id vulputate neque. Sed auctor dui sed nunc gravida fermentum. Fusce hendrerit metus vitae turpis luctus malesuada. Fusce vel mi at risus ullamcorper accumsan in ac nisl. Quisque dapibus nunc sed massa iaculis sollicitudin eget non metus. Pellentesque pellentesque purus posuere vestibulum sodales. Nullam erat elit, congue a ligula in, semper mollis orci.
</div><div class="orta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus ut nunc ultrices suscipit. Quisque id mattis tortor. Morbi quis tortor at lectus feugiat tincidunt. Curabitur pretium urna diam, nec scelerisque dui porttitor in. Praesent ipsum turpis, mattis id egestas eget, ultrices vitae est. Fusce pharetra, augue quis suscipit egestas, enim risus lacinia quam, vitae iaculis lacus libero id sapien. In venenatis magna vitae eros viverra tristique. Nulla facilisi. Duis id vulputate neque. Sed auctor dui sed nunc gravida fermentum. Fusce hendrerit metus vitae turpis luctus malesuada. Fusce vel mi at risus ullamcorper accumsan in ac nisl. Quisque dapibus nunc sed massa iaculis sollicitudin eget non metus. Pellentesque pellentesque purus posuere vestibulum sodales. Nullam erat elit, congue a ligula in, semper mollis orci.
</div><div class="sol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus ut nunc ultrices suscipit. Quisque id mattis tortor. Morbi quis tortor at lectus feugiat tincidunt. Curabitur pretium urna diam, nec scelerisque dui porttitor in. Praesent ipsum turpis, mattis id egestas eget, ultrices vitae est. Fusce pharetra, augue quis suscipit egestas, enim risus lacinia quam, vitae iaculis lacus libero id sapien. In venenatis magna vitae eros viverra tristique. Nulla facilisi. Duis id vulputate neque. Sed auctor dui sed nunc gravida fermentum. Fusce hendrerit metus vitae turpis luctus malesuada. Fusce vel mi at risus ullamcorper accumsan in ac nisl. Quisque dapibus nunc sed massa iaculis sollicitudin eget non metus. Pellentesque pellentesque purus posuere vestibulum sodales. Nullam erat elit, congue a ligula in, semper mollis orci.
</div>
</body>
</html>
Browser ekranını büyültüp küçülterek test edebilirsiniz.
Sonuç
Media query’lerinin bir sürü özelliği var bunları araştırıp öğrenebilirsiniz. Temel olarak bunlar şu anlık yeterlidir 🙂 Ayrıca ek olarak bir sürü javascript’e ihtyaç duyabilirsiniz. Kolay gelsin.
adamsın, ellerine sağlık, yenilerini bekliyoruz.