Responsive Design – 2 Media Queries

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

Normal Ekran

print alma ekranı

print alma ekranı

Görüldüğü gibi CSS’te 2 farklı durum için 2 farklı css tasarladım. Şimdi bunları ekran boyutları için uygulayacağım.

Ekran Boyutlarına Göre Ayarlama

Şimdi ekran boyutlarına göre 3 farklı css tasarlayacağız.

  1. Normal bilgisayarlar için
  2. Tabletler için
  3. 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.

One thought on “Responsive Design – 2 Media Queries

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax