CSS Media Sorgusu - Örnek
- Önceki Sayfa CSS Medya Sorguları
- Sonraki Sayfa RWD Tanıtımı
CSS Media Sorgusu - Daha Fazla Örnek
Media sorgusu kullanımı hakkında daha fazla örnek görelim.
Media sorgusu, farklı cihazlara özelleştirilmiş stil tablolarını iletmek için popüler bir tekniktir.
Aşağıda, farklı cihazların arka plan renklerini değiştirmek için basit bir örnek gösteriyoruz:
Örnek
/* Body'nin arka plan rengini koyu kahverengiye ayarlayın */
body {
background-color: tan;
}
/* 992 piksel veya daha küçük ekranlarda, arka plan rengini maviye ayarlayın */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* 600 piksel veya daha küçük ekranlarda, arka plan rengini zeytinyağı tonuna ayarlayın */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Neden 992px ve 600px'yi tam olarak kullanmamız gerektiğini merak ediyor musunuz? Bu, cihazlarımızın 'tipik kesintiler' (tipik breakpoints) olarak adlandırılanlarıdır. Onları bizim Duyarlı Web Tasarımı Eğitimi 典型断点的更多知识有关中学习。
Menü medya sorgusu
Bu örnekte, farklı ekran boyutlarında değişen yanıt verici bir navigasyon menüsü oluşturmak için medya sorgularını kullanıyoruz.
Örnek
/* Navbar konteyneri */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar bağlantıları */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Genişliği 600 piksel veya daha küçük olan ekranlarda, menü bağlantılarını yan yana değil, yığın halinde yap */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Sütun medya sorgusu
Medya sorgusunun yaygın kullanımı, esnek düzen oluşturmaktır. Bu örnekte, dört sütun, iki sütun ve tam genişlik sütunları arasında değişen bir düzen oluşturduk, bu da farklı ekran boyutlarına bağlıdır:
Büyük ekranlar:
Orta ekranlar:
Küçük ekranlar:
Örnek
/* Birbirine komşu yüzeysel sütunlar oluşturur */
.column {
float: left;
width: 25%;
}
/* 992px veya daha küçük ekranlarda, dört sütun iki sütuna dönüşür */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Genişliği 600 piksel veya daha az olan ekranlarda, sütunları yan yana değil, yığın halinde yap */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
İpucu:daha modern sütun düzeni oluşturma yöntemi CSS Flexbox'tur (aşağıdaki örneklere bakın). Ancak, Internet Explorer 10 ve daha eski sürümler bunu desteklememektedir. IE6-10 desteği gerekiyorsa, yukarıda gösterildiği gibi yüzeysel kullanın.
Esnek kutu düzen modülü hakkında daha fazla bilgi edinmek için, CSS Flexbox bu bölümü öğrenin.
Yanıt verici Web tasarımı hakkında daha fazla bilgi edinmek için, bizim Duyarlı Web Tasarımı Eğitimi.
Örnek
/* Esnek kutu konteyneri */
.row {
display: flex;
flex-wrap: wrap;
}
/* Dört eşit sütun oluşturur */
.column {
flex: 25%;
padding: 20px;
}
/* 992px veya daha küçük ekranlarda, dört sütun iki sütuna dönüşür */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Genişliği 600 piksel veya daha az olan ekranlarda, sütunları yan yana değil, yığın halinde yap */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Medya sorgusu ile öğeleri gizleme
Medya sorgusunun diğer yaygın kullanım alanları, farklı ekran boyutlarında öğeleri gizlemektir:
Küçük ekranlarda gizleyeceğim.
Örnek
/* Ekrar genişliği 600 piksel veya daha küçükse, bu elementi gizleyin */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Medya sorgusu ile yazı boyutu değiştirme
Ayrıca, farklı ekran boyutlarındaki elementlerin yazı boyutunu medya sorguları ile değiştirebilirsiniz:
Değişken yazı boyutu.
Örnek
/* Ekrar genişliği 600 pikselden büyükse, <div> yazı boyutunu 80 piksel'e ayarlayın */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Ekrar genişliği 600 piksel veya daha küçükse, <div> yazı boyutunu 30px'ye ayarlayın */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Esnek görsel kütüphanesi
Bu örnekte, medya sorgularını ve flexbox'u birlikte kullanarak esnek bir görsel kütüphanesi oluşturacağız:
Örnek
Esnek web sitesi
Bu örnekte, esnek web sitesi oluşturmak için medya sorgularını ve flexbox'u birlikte kullanacağız, bu da esnek navigasyon panelleri ve esnek içerikler içeren bir web sitesi oluşturur:
Örnek
Yön: Portre / Manzara
Medya sorguları, sayfanın düzenini tarayıcı yönüne göre değiştirmek için de kullanılabilir.
Yalnızca tarayıcı penceresinin genişliği yüksekliğinden büyük olduğunda geçerli olan bir grup CSS özelliği ayarlayabilirsiniz, yani dikey ekran:
Örnek
Yatay modda olduğunda, açık mavi arka renk kullanın:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
En küçük genişlikten en büyük genişliğe
Ayrıca, en küçük ve en büyük genişlikleri ayarlamak için max-width ve min-width özelliklerini kullanabilirsiniz.
Örneğin, tarayıcı genişliği 600 ila 900 piksel arasında olduğunda, <div> elementinin görünümünü değiştirme:
Örnek
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Ek değer kullanımı: Aşağıdaki örnekte, mevcut medya sorgularına ek medya sorgularını eklemek için virgül (OR işlevselliği benzeri) kullanıyoruz:
Örnek
/* Genişlik 600 piksel ile 900 piksel arasında veya 1100 pikselden büyük olduğunda - <div> görünümünü değiştir */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media Referans Kılavuzu
Tüm medya türleri ve özellik/ifadelerle ilgili tam bir genel bakış için CSS Referansındaki @media Kuralları.
İpucu:Duyarlı Web Tasarımı (farklı cihazlar ve ekranlar için nasıl hedeflenir) hakkında daha fazla bilgi edinmek ve medya sorgu kesmelerini kullanmak istiyorsanız, bizim Duyarlı Web Tasarımı Eğitimi.
- Önceki Sayfa CSS Medya Sorguları
- Sonraki Sayfa RWD Tanıtımı
