Ders 87 - Media Query & Responsive Tasarım | CSS | SIFIRDAN WEB SİTESİ YAPIMI | FrontEnd Eğitimi

Ücretsiz UDEMY Kursu için videoyu beğenip, yorumlarda mail adresinizi yazın. 5 dakika sonra link mailinize gelsin

---------------------------------------------------------------------------



Merhaba sevgili izleyiciler, ben Haydar Canıbek.

Bu videoda, CSS'de Media Query özelliğini ele alacağız. Media Query, web sayfalarınızı farklı cihaz boyutlarına uyumlu hale getirmek için kullanılan CSS özelliklerinden biridir. Bu sayede, mobil cihazlardan tabletlere, dizüstü bilgisayarlardan geniş ekran masaüstü monitörlere kadar her cihazda iyi bir kullanıcı deneyimi sunabilirsiniz.

Media Query Nedir?
Media Query, CSS'in cihaz türü ve ekran boyutu gibi özelliklere göre farklı stil kuralları uygulamasını sağlayan bir yapıdır. Sayfanızın düzenini, font boyutunu, renkleri, boşlukları ve daha pek çok stil özelliğini cihazın ekran özelliklerine göre ayarlamak için kullanılır. Bu, "responsive" yani duyarlı tasarımın temel taşıdır.

Media Query Kullanımı
Media Query'nin temel kullanımı @media ile başlar. Örneğin, belirli bir ekran genişliğinden küçük cihazlar için stilleri değiştirmek istediğinizde şu yapıyı kullanabilirsiniz:

css
Kodu kopyala
@media (max-width: 768px) {
/* Bu alandaki stiller 768 piksel genişliğinden daha küçük ekranlarda geçerli olur */
body {
font-size: 14px;
}
.container {
padding: 10px;
}
}
Bu örnekte:

@media (max-width: 768px) ifadesi, ekran genişliğinin 768 pikselden küçük veya eşit olduğu durumları hedefler.
İçindeki stiller, sadece bu ekran boyutunda geçerli olur.
Media Query Değerleri
Media Query kullanarak aşağıdaki kriterlere göre farklı stiller tanımlayabilirsiniz:

max-width / min-width: Ekran genişliği belirli bir maksimum ya da minimum değerden büyük/küçük olduğunda uygulanır.
orientation: Cihazın yönünü belirler, "portrait" (dikey) veya "landscape" (yatay) olarak tanımlanabilir.
resolution: Cihaz çözünürlüğüne göre özel stiller tanımlar, yüksek çözünürlüklü ekranlar (örneğin retina ekranlar) için özelleştirilebilir.
Media Query Örnekleri
Mobil Cihazlar için: 480 pikselden küçük ekranlar için örnek bir media query:

css
Kodu kopyala
@media (max-width: 480px) {
.menu {
display: none;
}
.logo {
font-size: 20px;
}
}
Tablet ve Mobil için Ortak Kullanım: 768 pikselden küçük ekranlar için:

css
Kodu kopyala
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}
Yatay Ekranlar için:

css
Kodu kopyala
@media (orientation: landscape) {
.container {
padding: 20px;
}
}
Media Query'nin Avantajları
Esnek Tasarımlar: Media Query sayesinde siteniz tüm ekran boyutlarına kolayca uyum sağlar.
Daha İyi Kullanıcı Deneyimi: Kullanıcılar, cihaz fark etmeksizin daha iyi bir deneyim yaşar.
Kolay Güncellenebilirlik: Media Query ile her ekran boyutu için farklı dosyalar yerine tek bir CSS dosyasında değişiklik yapabilirsiniz.
Sık Kullanılan Media Query Boyutları
480px ve altı: Mobil cihazlar
768px ve altı: Tablet cihazlar
1024px ve üstü: Dizüstü bilgisayar ve masaüstü cihazlar
Bu videoda, media query'leri kullanarak nasıl daha duyarlı ve kullanıcı dostu web sayfaları oluşturabileceğinizi detaylandırarak örneklerle göstereceğiz. Daha fazla bilgi ve CSS ipucu için kanalıma abone olmayı unutmayın! Bir sonraki videoda görüşmek üzere, hoşça kalın!