
CSS Responsive Media Query Nedir? Nasıl Kullanılır?
Artık günümüz teknolojisinde yaygın olarak kullanılan mobil cihazlar (Akıllı telefonlar, Tabletler vb.) internet erişimi sağlamsıyla birlikte kullanıcıların siteyi daha rahat dolaşabilmeleri için farklı ekran çözünürlüklerinde web sayfalarının, farklı görüntüleme modellerinin oluşması ihtiyacını doğurdu. Ülkemizde ve Dünyada en çok kullanılan arama motoru olan Google geçtiğimiz ay tüm iltişim kanallarından responsive (mobil duyarlılık ) özelliğini üst sıralara çıkma kriteri olarak baz alacağını duyurdu. Yani responsive design artık olmazsa olmazlar arasında yer aldı. Peki oluşturulan web sitelerini mobil duyarlı hale nasıl getireceğiz? Html yapımızda oluşturmuş olduğumuz iskeleti farklı erkan modlarında CSS Media Query özelliği ile istediğimiz şekle ve formata sokma imkanımız mevcut. CSS sitil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz. İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end frameowrkü mevcut (Foundation,Bootstrap vb) bizim tavsiyemiz en yaygın olarak kullanılan Twitter Bootstrap’tır. İçerisinde hazır olarak gelen responsive grid yapısıyla daha hızlı mobil uyumlu websiteleri oluşturabilirsiniz. Şimdi resposnive yapı için @media özelliğinin nasıl kullanıldığını örneklerle inceleyelim.
İlk iş olarak Html dosyamıza diğer yapılarla karışmaması için <head></head> kodları arasına ayrı bir responsive.css dosyası ekleyelim.
Html Kod Yapısı
1 2 3 4 5 6 7 |
<link rel="stylesheet" media="screen" href="responsive.css"> |
Html kodumuza eklemiş olduğumuz responsive.css dosyamızı düzenleme yapımıza geçmeden bilmemiz gereken bazı püf noktaları var. Kullanacak olduğumuz @media sorugusu için bazı matıksal operatörlere ihtiyaç duyabiliriz. bunlara aşağıdaki tablodan ulaşabilirsiniz.
@media Mantıksal Operatörleri
Mantıksal Op. | Açıklama |
---|---|
and | iki veya daha fazla özelliği bir birine bağlar |
only | Sadece belirtilmiş koşullar sağlandığında uygulama işlemi gerçekleştirilmesi için kullanılır. |
not | Uygulanacak olan değer aralığında bu yapıyı kullanma anlamını taşır. |
Birden fazla sorgu | Kullanacak olduğunuz media tiplerinde ortak değerler var ise “,” virgül ile ayırarak aynı işlemi ilgili alanlara ataya bilirsiniz |
Şimdi sırasıyla mantıksal operatörlerinin kullanımına bakalım.
– and
1 2 3 4 5 6 7 8 9 10 11 |
@media (min-width:480px) and (max-width:768px){ body{ background-color: black; } } |
Ekran boyutu minumum genişlik 480 pixel ve maksimum genişlik 768 pixel aralğında davranışlarının değişmesini istediğimiz kod blokları için “and” yapısını kullandık.
– only
1 2 3 4 5 6 7 8 9 10 11 |
@media only screen and (max-width: 480px){ body{ background-color: black; } } |
Ekran genişliği sadece maksimum genişlik 480 piksel olana kadar davranışlarının değişmesini istediğimiz kod blokları için “only” yapısını kullandık.
– not
1 2 3 4 5 6 7 8 9 10 11 |
@media not screen and (max-width: 480px){ body{ background-color: black; } } |
Ekran genişliği maksimum genişlik 480 piksel dışında kalan alanlarda davranışlarının değişmesini istediğimiz kod blokları için “not” yapısını kullandık.
– Birden fazla sorgu
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media only screen and(max-width: 480px), print{ p{ color: green; } } |
Daha önceki yazılarımızda bir @media tipi olan print yapısından bahsetmiştik.(@meida print için tıklayınız) Yukarıda ki kullanıma baktığımızda ekran genişliği maksimum 480 piksele kadar p tagının rengini yeşil yap aynı zamanda çıktı alınacak olan yazının da p yapısının rengini yeşil yap demiş olduk iki farklı media tipi için ortak kullanım yapılarını “,” virgül ile ayırarak gruplamış olduk.
Şimdi sık kullanılan medya özelliklerinden bahsedelim.
Medya Özellikleri
Değer | Açıklama |
---|---|
aspect-ratio | Genişlik ve görüntüleme alanının yüksekliği arasındaki oranı belirler |
device-aspect-ratio | Genişlik ve cihazın yüksekliği arasındaki oranını belirtir |
device-height | İlgili cihazın, yüksekliğini belirtir |
device-width | İlgili cihazın,genişliğini belirtir |
height | Yükselik yapısı için kullanılır |
width | Genişlik yapısı için kullanılır |
max-device-aspect-ratio | Genişlik ve cihazın yüksekliği arasındaki maksimum oranı belirler |
min-device-aspect-ratio | Genişlik ve cihazın yüksekliği arasındaki minimum oranı belirler |
max-device-height | Cihazın, maksimum yüksekliğini belirtir |
max-device-width | Cihazın, maksimum genişliğini belirtir |
min-device-height | Cihazın, minimum yüksekliğini belirtir |
min-device-width | Cihazın, minimum genişliğini belirtir |
min-width | Ekranın, minimum genişliğini belirtir |
min-height | Ekranın, minimum yüksekliğini belirtir |
max-height | Ekranın, maksimum yükseliğini belirtir |
max-height | Ekranın, minimum genişliğini belirtir |
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.