Bir haftada duyarlı bir site oluşturun: medya sorguları (4. bölüm)

İçerik

• 01. Medya sorguları ekleme
• 02. Bir medya sorgusunun anatomisi
• 03. Bir şey daha…
• 04. Ayrılma noktalarını seçme
• 05. Küçük resimlerimizi ayarlama
• 06. Sadece genişlik değil

• Bilgi gerekli: Orta düzey CSS ve HTML
• Gerektirir: Metin düzenleyici, modern tarayıcı, grafik yazılımı
• Proje Zamanı: 1 saat (toplam 5 saat)
• Destek dosyası

CSS spesifikasyonunun nispeten yeni bir parçası olan medya sorguları, şüphesiz duyarlı web tasarımının en heyecan verici yönü ve daha fazla deney için olgunlaşmış bir alandır.

Uyarlanabilir düzen ihtiyacını kabul eden bazıları, ortam sorgularını uyarlanabilir düzenleri mevcut sabit genişlikli sitelere uyarlamanın bir yolu olarak görmüştür. Duyarlı düzenleri benimseyenler arasında, çoğu bunu masaüstü perspektifinden yaptı, görüntü alanı daraldıkça içeriği ve özellikleri gizledi.

Bu eğitim boyunca alternatif, önce mobil bir yaklaşım izledik. Şimdi, medya sorgularını dahil etmeye çalışırken, ekleme Ekran gayrimenkulü arttıkça özellikler, sitemizin temelini oluşturan biçimlendirme ve tasarımın saygın bir temel sağladığı bilgisinde güvenlidir.

Bugün, desen portföyümüzün ötesine geçeceğiz ve web sitemiz için gerekli olan bireysel sayfaları oluşturacağız. Bunu yaparken, medya sorgularının nasıl yapılandırıldığını göreceğiz ve bunları gerçekten duyarlı bir şekilde uygulayacağız.

01. Medya sorguları ekleme

Desen portföyümüzdeki bileşenlerin tamamlanması ve herhangi bir düzenin sınırları dışında çalışmasıyla, bunları sitemizi oluşturan farklı sayfalara taşıma zamanı.

Ana sayfamızla başlayacağız. Masaüstü odaklı tasarımdan, daha geniş görünüm alanlarında yerleşimimizin aşağıdaki gibi görünmesi gerektiğini görebiliriz:

Tasarımımızdan ölçü alarak CSS'deki belge alanını şu şekilde tanımlayabiliriz:

.document {
dolgu: 0% 5;
}
.ana {
genişlik: 74,242424242424%; / * 784/1056 * /
şamandıra: sol;
}
.complementary {
genişlik:% 22.727272727273; / * 240/1056 * /
Sağa çık;
}

Bu eğitimin ikinci bölümünde öğrendiğimiz gibi, bu sütunların yüzde genişliğini hesaplamak için aşağıdaki formülü kullanıyoruz:

(hedef / bağlam) * 100 = sonuç

Tarayıcımızı yeniden boyutlandırdığımızda, masaüstü düzenimizin en küçük ekrandan en büyüğe ölçeklendiğini göreceğiz. Tabii ki, küçük boyutlarda sütunlar çok dardır ve satır uzunlukları o kadar kısadır ki, içeriğin okunması zordur. Bu düzeni yalnızca çalışması için yeterli alan olduğunda istiyoruz.

Burası medya sorgularının devreye girdiği yerdir. Bu düzenin yalnızca tarayıcı 768 pikselden daha geniş olduğunda etkili olması gerektiğini varsayarsak, aşağıdaki CSS'yi ekleyebiliriz:

.document {
dolgu: 0% 5;
}
@media ekranı ve (min-genişlik: 768px) {
.ana {
genişlik: 74,242424242424%; / * 784/1056 * /
şamandıra: sol;
}
.complementary {
genişlik:% 22.727272727273; / * 240/1056 * /
Sağa çık;
}
}

Şimdi, görüntü alanı 768 pikselden daha dar olduğunda, medya sorgusunun içindeki her şey göz ardı edilecektir. Medya sorgularını da desteklemeyen herhangi bir tarayıcı tarafından göz ardı edilecektir.

02. Bir medya sorgusunun anatomisi

Burada neler olduğunu anlamak için, bir medya sorgusunun nasıl yapılandırıldığına bakalım. Bunu iki kısma ayırabiliriz:

• @media ekranı: Bir medya sorgusunun ilk kısmı, ortam türü. CSS'nize daha önce yazdırma stilleri eklediyseniz bu sözdizimini tanıyabilirsiniz. Ayrıca tür adını, medya özniteliği bağlantı> öğesi. Bunun nedeni, her ikisinin de CSS 2.1 spesifikasyonunda bulunan onaylanmış ortam türleri setini kabul etmesidir.
• (minimum genişlik: 768 piksel): İkinci bölüm ise sorgu. Bu şunları içerir: özellik sorgulanacak (bu durumda görünüm alanının minimum genişliği) ve karşılık gelen değer (768px) için test etmek için.

Duyarlı web tasarımı hakkında konuştuğumuzda, genişliğe odaklanma eğilimi vardır, ancak test edebileceğimiz başka özellikler de vardır:

• (min- | max-) genişlik ve (min- | max-) yükseklik: Bunlar, görünüm alanının (yani tarayıcı penceresi) genişliğini ve yüksekliğini sorgulamamıza izin verir.
• (min- | max-) cihaz genişliği ve (min- | max-) cihaz yüksekliği: Bunlar, tüm ekranın genişliğini sorgulamamıza izin verir. Deneyimlerime göre, düzenleri ekrandan ziyade görüntü alanına dayandırmak genellikle daha mantıklıdır.
• oryantasyon: Buradaki olasılıkları hemen düşünebilirsiniz; telefonunuzun yönüne bağlı olarak farklı içerik gösteren uygulamaları düşünün - aynısı web'de de mümkündür.
• (min- | maks-) en boy oranı: Bu, tarayıcı penceresinin oranına göre mizanpajları uyarlamamıza olanak tanır ...
• (min- | maks-) cihaz en boy oranı: … Ve bu, aynı şeyi cihazın en boy oranına göre yapmamıza olanak tanır. Owen Gregory, geçen yıl tasarımlarımızı üzerinde göründükleri cihazlara bağlamak için bu sorguyu nasıl kullanabileceğimizi araştıran harika bir makale yazdı.
• (min- | maks-) tek renkli: Bir cihazın monokrom ekrana sahip olup olmadığını da test edebiliriz. Amazon'un e-ink Kindle cihazları yalan söyleyip ekranlarını renkli olarak bildirmeseydi bunun ne kadar faydalı olacağını bir düşünün!

Sorgumuzun son kısmı muhtemelen en yararlı olanıdır. Kullanarak ve, tek bir sorguda birden çok özelliği test edebiliriz. Örneğin:

@media ekranı ve (min-genişlik: 768 piksel) ve (yönlendirme: yatay) {
...
}

Gördüğünüz gibi, medya sorguları oldukça ilgi çekici deneyimler oluşturmamıza yardımcı olabilir - ve ben sadece yüzeye dokundum. Hafif bir uyku vakti okuması arıyorsanız, test edebileceğimiz tüm özellikleri açıklayan W3C medya sorgu spesifikasyonunu okumaktan daha kötüsünü yapabilirsiniz.

03. Bir şey daha…

CSS'mize medya sorgularını eklemiş olsak da, sitemizi bir mobil cihazda görüntülersek, sitemizin hala 768 pikselden daha geniş bir ekran gibi görüntülendiğini fark edeceksiniz.

Bunun neden olduğunu anlamak için kısa bir tarih dersi almamız gerekiyor.

Orijinal iPhone 2007'de duyurulduğunda, en büyük satış noktalarından biri, küçük ekranına sığması için sıkıştırılması gereken sabit genişlikte masaüstü odaklı siteler anlamına gelse bile, 'gerçek web'e' göz atma becerisiydi. İPhone, web sayfalarını 320 piksel genişliğindeki ekranına sığacak şekilde ölçeklendirmeden önce, ekranını 980 piksel genişliğinde bildirerek bunu başardı.

Ancak iPhone, duyarlı tasarımın ortaya çıkmasından önce tanıtıldı. Artık yazarlar mobil için tasarlanmış siteler tasarladığına göre, bu özellik daha az kullanışlıdır. Neyse ki, Apple bu davranışı atlatmanın bir yolunu ekledi ve diğer üreticiler tarafından da benimsendiğinden, neredeyse bir fiilen standart. Basitçe tek bir meta biçimlendirmemizin öğesi:

meta name = "görüntü alanı" content = "initial-scale = 1,0, genişlik = cihaz genişliği" />

Bu, görüntü alanına duyarlı tarayıcılara bir web sitesinin küçültülmemesi gerektiğini ve tarayıcı penceresinin genişliğinin genel cihaz genişliğiyle aynı şekilde ele alınması gerektiğini söyler. Bu satırı ekledikten sonra, web sitemiz istenen düzende görünecektir:

04. Ayrılma noktalarını seçme

Medya sorgumuza dönelim:

@media ekranı ve (min-genişlik: 768px) {
...
}

Bir düzenin uyum sağladığı değerler genellikle kesme noktaları olarak adlandırılır. Hatırlarsanız, ikinci bölümde piksel kullanmanın tepkisiz düşüncenin bir göstergesi olduğunu söyledim, ancak burada 768px'i seçtim, çünkü muhtemelen tanıdık bir cihazın genişliği.

Popüler cihazların özelliklerine göre kesme noktaları seçmek yerine, içeriğimizden türetilen değerlere, örneğin okumak için rahat satır uzunluklarına veya bir görüntünün maksimum boyutuna bakmak daha etkili olabilir.

Türünüzün ems kullanılarak boyutlandırılmasıyla, medya sorgularımızın da ems kullanması mantıklı görünüyor. Aslında bunu yapmanın ek bir faydası vardır. Bir kullanıcı tarayıcıdaki metni yeniden boyutlandırdığında, sayfalar daha küçük kesme noktaları kullanacak şekilde uyarlanır. Web sitemiz yalnızca görüntü alanının boyutuna göre değil, aynı zamanda yazı tipinin boyutuna da uyarlanacaktır. Aslında, Jeremy Keith'in em tabanlı medya sorgularını gösterdiğini gördüğümde ne kadar güçlü olabileceklerini fark ettim.

Tasarımımız olası kırılma noktalarına ilişkin bazı göstergeler sunsa da, genellikle bunları seçmenin en iyi yolu deney yapmaktır. Tarayıcı penceresinin genişliğini ayarlayarak, 800px'in daha karmaşık bir düzene geçmek için iyi bir genişlik olduğuna karar verdim.

Peki ems'de 800px'i nasıl ifade ederiz? Yine formülümüzü kullanabiliriz, ancak bağlam nedir? Medya sorguları için ems hesaplanırken, bağlam her zaman tarayıcının varsayılan yazı tipi boyutudur. bu değerin CSS'nizde geçersiz kılınmış olup olmadığına bakılmaksızın. Bu varsayılan tipik olarak 16 pikseldir ve bize şunu verir:

800 / 16 = 50

Artık medya sorgumuzu şu şekilde güncelleyebiliriz:

@media ekranı ve (min-genişlik: 50em) {/ * 800px * /
...
}

05. Küçük resimlerimizi ayarlama

2. bölümde küçük resimlerimizi duyarlı olacak şekilde şekillendirdiğimizi hatırlayacaksınız. Yine de bu küçük resimlerdeki görüntüler tam genişliğine ulaştığında, her görüntünün sağında bir beyaz boşluk alanı belirir. Yine, medya sorguları bunu düzeltmemize izin veriyor.

İşte orijinal CSS'miz:

ol.media li.media-item {
arka plan rengi: #fff;
marj: 0 4.16666666667% 4.16666666667% 0;
genişlik: 47.91666666667%;
şamandıra: sol;
}
ol.media li.media-item: nth-child (2n) {
sağ kenar boşluğu: 0;
}

Bu beyaz boşluğun göründüğü nokta, tarayıcının 560 pikselden daha geniş büyüdüğü andır.Satır başına üç küçük resim göstermek için değiştirilecek bu değeri seçeceğiz. Bunu aşağıdaki CSS'yi ekleyerek yapabiliriz:

@media ekranı ve (min-genişlik: 35em) {
.media-item {
genişlik: 30.612244897959%; / * 240/784 * /
marj: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
sağ kenar boşluğu: 0;
}
}

Bu medya sorgusu içindeki küçük resim için gerekli tüm stilleri yeniden yazmamız gerekmediğini, sadece uyarlamak istediğimiz kısımları yeniden yazmamız gerektiğini unutmayın.

Tarayıcıda bu değişikliği görüntülediğinizde, her iki küçük resmin sağında bir kenar boşluğu olmadığını fark edeceksiniz. Bunun nedeni, aşağıdaki CSS kuralının hala etkin kalmasıdır:

ol.media li.media-item: nth-child (2n) {
sağ kenar boşluğu: 0;
}

Bu değeri sıfırlamak için medya sorgumuzdaki CSS'yi değiştirmemiz gerekiyor:

@media ekranı ve (min-genişlik: 35em) {
.media-item {
genişlik: 30.612244897959%; / * 240/784 * /
marj: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
sağ kenar boşluğu: 4.081632653061%;
}
.media-item: nth-child (3n) {
sağ kenar boşluğu: 0;
}
}

Medya sorguları oluştururken, her zaman bunun gibi miras sorunlarının farkında olun.

06. Sadece genişlik değil

Medya sorgularını yalnızca genişlik açısından değil, diğer değişkenler açısından da düşünmek önemlidir. Örneğin, görüntü alanı yüksekliği azaldığında, medya öğesi sayfamızdaki video kısmen gizlenir. Teknolojiye sahibiz:

.media-object-wrapper {
alt dolgu:% 56.25;
genişlik:% 100;
yükseklik: 0;
konum: göreceli;
}
@media ekranı ve (maks. yükseklik: 35em) ve (yönlendirme: yatay) {/ * 560px * /
.media-object-wrapper {
genişlik:% 60;
alt dolgu:% 33.75;
}
}

Bu davranışı daha da incelemek için bir oryantasyon sorgusu bile ekledim.

Tasarımımızın diğer bölümleri için benzer bir yaklaşım izleyebilir, başlığın daha büyük bir versiyonunu değiştirebilir ve alan kullanılabilir hale geldiğinde gezinme bağlantılarını sayfanın üst kısmına taşıyabiliriz.

• Duyarlı ana sayfamızı görüntüleyin
• Duyarlı medya öğesi sayfamızı görüntüleyin

Ve işte bizde var! Duyarlı bir web sitesi oluşturduk - ve boş bir günümüz var! Pek iyi değil. Esnek düzenler, resimler ve medya sorguları, duyarlı tasarım sürecinin yalnızca başlangıcıdır.

Yarın: Bu eğiticinin son bölümünde, duyarlı web tasarımının ötesine geçeceğiz ve gerçekten duyarlı web sitelerini nasıl oluşturabileceğimize bakacağız.

Paul, İngiltere'nin Brighton şehrinde bulunan bir etkileşim tasarımcısıdır. Web'e özgü basit ancak ilgi çekici arayüzler oluştururken en mutlu olanıdır.