Duyarlı tasarım

Bu codelab, Google Developers Training ekibi tarafından geliştirilen Progresif Web Uygulamaları Geliştirme eğitim kursunun bir parçasıdır. Bu kurstan en iyi şekilde yararlanmak için codelab'leri sırayla tamamlamanız önerilir.

Kursla ilgili tüm ayrıntılar için Progresif web uygulamaları geliştirme genel bakış başlıklı makaleyi inceleyin.

Giriş

Bu laboratuvarda, web sitenizin içeriğini duyarlı hale getirmek için nasıl stilize edeceğiniz gösterilmektedir.

Neler öğreneceksiniz?

  • Uygulamanızı birden fazla form faktöründe iyi çalışacak şekilde tasarlama
  • İçeriğinizi sütunlar halinde kolayca düzenlemek için Flexbox'ı kullanma
  • İçeriğinizi ekran boyutuna göre yeniden düzenlemek için medya sorgularını kullanma

Bilmeniz gerekenler

  • Temel HTML ve CSS

İhtiyacınız olanlar

  • Terminal/kabuk erişimi olan bir bilgisayar
  • İnternet bağlantısı
  • Metin düzenleyici

GitHub'dan pwa-training-labs deposunu indirin veya klonlayın ve gerekirse Node.js'nin LTS sürümünü yükleyin.

Tercih ettiğiniz bir yerel geliştirme sunucunuz yoksa Node.js http-server paketini yükleyin:

npm install http-server -g

responsive-design-lab/app/ dizinine gidin ve sunucuyu başlatın:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Sunucuyu Ctrl-c ile istediğiniz zaman sonlandırabilirsiniz.

Tarayıcınızı açıp localhost:8080/ adresine gidin.

Not: Laboratuvarı etkilememeleri için tüm hizmet çalışanlarının kaydını iptal edin ve localhost için tüm hizmet çalışanı önbelleklerini temizleyin. Chrome Geliştirici Araçları'nda, Uygulama sekmesinin Depolamayı temizle bölümünden Site verilerini temizle'yi tıklayarak bunu yapabilirsiniz.

Bir projeyi açmanıza olanak tanıyan bir metin düzenleyiciniz varsa responsive-design-lab/app/ klasörünü açın. Bu sayede düzenli kalmak daha kolay olur. Aksi takdirde, klasörü bilgisayarınızın dosya sisteminde açın. Laboratuvarı app/ klasöründe oluşturacaksınız.

Bu klasörde şunlar bulunur:

  • index.html, örnek sitemizin/uygulamamızın ana HTML sayfasıdır.
  • modernizr-custom.js, Flexbox desteği için test yapmayı kolaylaştıran bir özellik algılama aracıdır.
  • styles/main.css, örnek sitenin basamaklı stil sayfasıdır.

Tarayıcıda uygulamaya geri dönün. Pencere genişliğini 500 pikselin altına düşürmeyi deneyin ve içeriğin iyi yanıt vermediğini fark edin.

Tarayıcınızda geliştirici araçlarını açın ve cihaz modunu etkinleştirin. Bu mod, uygulamanızın mobil cihazdaki davranışını simüle eder. Sayfanın, ekrandaki sabit genişlikli içeriğe sığması için uzaklaştırıldığını fark edin. Bu durum, içerik çoğu kullanıcı için çok küçük olacağından ve kullanıcıları yakınlaştırma ve kaydırma yapmaya zorlayacağından iyi bir deneyim sunmaz.

index.html içindeki YAPILACAKLAR 3'ü aşağıdaki etiketle değiştirin: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Dosyayı kaydedin. Tarayıcıda sayfayı yenileyin ve sayfayı cihaz modunda kontrol edin. Sayfanın artık uzaklaştırılmadığını ve içeriğin ölçeğinin masaüstü cihazdaki ölçekle eşleştiğini fark edin. İçerik, cihaz emülatöründe beklenmedik şekilde davranıyorsa sıfırlamak için cihaz modunu açıp kapatın.

Not: Cihaz emülasyonu, sitenizin mobil cihazda nasıl görüneceği konusunda size yaklaşık bir fikir verir ancak tam resmi görmek için sitenizi her zaman gerçek cihazlarda test etmeniz gerekir. Chrome ve Firefox'ta Android cihazlarda hata ayıklama hakkında daha fazla bilgi edinebilirsiniz.

Açıklama

Meta viewport etiketi, tarayıcıya sayfanın boyutlarını ve ölçeklemesini nasıl kontrol edeceği konusunda talimatlar verir. width özelliği, görüntü alanının boyutunu kontrol eder. Belirli bir piksel sayısına (örneğin, width=500) veya %100 ölçekte ekranın CSS piksel cinsinden genişliği olan device-width, özel değerine ayarlanabilir. (Görüntü alanı yüksekliğine göre boyutu veya konumu değişen öğeler içeren sayfalar için yararlı olabilecek karşılık gelen height ve device-height değerleri vardır.)

initial-scale özelliği, sayfa ilk yüklendiğinde yakınlaştırma düzeyini kontrol eder. İlk ölçeği ayarlamak deneyimi iyileştirir ancak içerik yine de ekranın kenarından taşar. Bu sorunu bir sonraki adımda düzelteceğiz.

Daha fazla bilgi için

styles/main.css içindeki TODO 4'ü aşağıdaki kodla değiştirin:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Dosyayı kaydedin. Tarayıcıda cihaz modunu devre dışı bırakın ve sayfayı yenileyin. Pencere genişliğini daraltmayı deneyin. İçeriğin, belirtilen genişlikte tek sütunlu düzene geçtiğini fark edeceksiniz. Cihaz modunu yeniden etkinleştirin ve içeriğin cihaz genişliğine uyacak şekilde yanıt verdiğini gözlemleyin.

Açıklama

Metnin okunabilir olduğundan emin olmak için tarayıcının genişliği 48rem (tarayıcının varsayılan yazı tipi boyutunda 768 piksel veya kullanıcının tarayıcısındaki varsayılan yazı tipi boyutunun 48 katı) olduğunda bir medya sorgusu kullanırız. Göreceli birimler için neden rem'in iyi bir seçim olduğunu açıklayan When to use Em vs Rem (Em ve Rem Ne Zaman Kullanılır?) başlıklı makaleyi inceleyin. Medya sorgusu tetiklendiğinde, sayfayı doldurmak için üç div'ün her birinin width değerini değiştirerek düzeni üç sütundan tek sütuna değiştiririz.

Esnek Kutu Düzen Modülü (Flexbox), içeriğinizi duyarlı hale getirmek için kullanışlı ve kullanımı kolay bir araçtır. Flexbox, önceki adımlardakiyle aynı sonucu elde etmemizi sağlar ancak aralık hesaplamalarını bizim yerimize yapar ve içeriği yapılandırmak için kullanıma hazır bir dizi CSS özelliği sunar.

CSS'deki mevcut kuralları yorum satırı yapma

styles/main.css içindeki tüm kuralları /* ve */ ile sarmalayarak açıklama satırı yapın. Bu kuralları, Flexbox'ın aşamalı geliştirme bölümünde Flexbox'ın desteklenmediği durumlarda yedek kurallarımız olarak kullanacağız.

Flexbox düzeni ekleme

styles/main.css içindeki TODO 5.2'yi aşağıdaki kodla değiştirin:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Kodu kaydedin ve tarayıcınızda index.html simgesini yenileyin. Tarayıcıda cihaz modunu devre dışı bırakın ve sayfayı yenileyin. Tarayıcı pencerenizi daraltırsanız sütunlar incelir ve sonunda yalnızca biri görünür durumda kalır. Bu sorunu bir sonraki alıştırmada medya sorgularıyla düzelteceğiz.

Açıklama

İlk kural, container div öğesini esnek kapsayıcı olarak tanımlar. Bu, doğrudan alt öğelerinin tümü için bir flex bağlamı sağlar. Daha geniş destek almak için Flexbox'ı dahil ederken eski ve yeni söz dizimini karıştırıyoruz (ayrıntılar için Daha fazla bilgi bölümüne bakın).

İkinci kural, eşit genişlikte esnek alt öğeler oluşturmak için .col sınıfını kullanır. Sınıfı col olan tüm div'ler için flex özelliğinin ilk bağımsız değişkenini 1 olarak ayarlamak, kalan alanı bunlar arasında eşit şekilde böler. Bu, göreli genişliği kendimiz hesaplayıp ayarlamaktan daha kolaydır.

Daha fazla bilgi için

İsteğe bağlı: Farklı göreli genişlikler ayarlama

İlk iki sütunun göreli genişliğini 1, üçüncüsünü ise 1,5 olarak ayarlamak için nth-child sözde sınıfını kullanın. Her sütunun göreli genişliğini ayarlamak için flex özelliğini kullanmanız gerekir. Örneğin, ilk sütunun seçicisi şöyle görünür:

.container .col:nth-child(1)

Flexbox ile medya sorgularını kullanma

styles/main.css içindeki TODO 5.4'ü aşağıdaki kodla değiştirin:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Kodu kaydedin ve tarayıcınızda index.html simgesini yenileyin. Tarayıcı genişliğini daralttığınızda içerik tek sütun halinde yeniden düzenlenir.

Açıklama

Medya sorgusu tetiklendiğinde flex-flow özelliğini column olarak ayarlayarak düzeni üç sütunlu düzenden tek sütunlu düzene değiştiriyoruz. Bu, 5. adımda eklediğimiz medya sorgusuyla aynı sonucu verir. Flexbox, içeriğinizi kolayca yapılandırmanıza, yeniden sıralamanıza ve gerekçelendirmenize olanak tanıyan flex-flow gibi birçok başka özellik sunar. Böylece içeriğiniz her bağlamda iyi yanıt verir.

Flexbox nispeten yeni bir teknoloji olduğundan CSS'mize yedekler eklemeliyiz.

Modernizr'ı ekleme

Modernizr, Flexbox desteği için test yapmayı kolaylaştıran bir özellik algılama aracıdır.

index.html içindeki TODO 6.1'i, özel Modernizr derlemesini içerecek kodla değiştirin:

<script src="modernizr-custom.js"></script>

Açıklama

index.html dosyasının en üstünde, Flexbox desteğini test eden bir Modernizr derlemesi bulunur. Bu, testin sayfa yüklenirken çalıştırılmasını sağlar ve tarayıcı Flexbox'ı destekliyorsa flexbox sınıfını <html> öğesine ekler. Aksi takdirde, <html> öğesine no-flexbox sınıfını ekler. Sonraki bölümde bu sınıfları CSS'ye ekleyeceğiz.

Not: Flexbox'ın flex-wrap özelliğini kullanıyorsak yalnızca bu özellik için ayrı bir Modernizr algılayıcı eklememiz gerekir. Bazı tarayıcıların eski sürümleri Flexbox'ı kısmen destekler ve bu özelliği içermez.

Flexbox'u aşamalı olarak kullanma

Flexbox desteklenmediğinde yedek kurallar sağlamak için CSS'de flexbox ve no-flexbox sınıflarını kullanalım.

Şimdi styles/main.css bölümünde, yorum satırı haline getirdiğimiz her kuralın önüne .no-flexbox ekleyin:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

Aynı dosyada, kuralların geri kalanının önüne .flexbox ekleyin:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

İsteğe bağlı 5.3. adımı tamamladıysanız tek tek sütunların kurallarına .flexbox eklemeyi unutmayın.

Kodu kaydedin ve tarayıcıda index.html simgesini yenileyin. Sayfa, eskisi gibi görünmeye devam eder ancak artık herhangi bir cihazdaki herhangi bir tarayıcıda iyi çalışır. Flexbox'ı desteklemeyen bir tarayıcınız varsa index.html dosyasını bu tarayıcıda açarak yedek kuralları test edebilirsiniz.

Daha fazla bilgi için

İçeriğinizi duyarlı hale getirmek için nasıl stil vereceğinizi öğrendiniz. Medya sorgularını kullanarak içeriğinizin düzenini, kullanıcının cihazının pencere veya ekran boyutuna göre değiştirebilirsiniz.

İşlediğimiz konular

  • Görsel görüntü alanını ayarlama
  • Flexbox
  • Medya sorguları

Kaynaklar

Duyarlı tasarımın temelleri hakkında daha fazla bilgi

Aşamalı geliştirme olarak Flexbox hakkında daha fazla bilgi

Duyarlı CSS için kitaplıklar hakkında bilgi

Medya sorgularını kullanma hakkında daha fazla bilgi

PWA eğitim kursundaki tüm codelab'leri görmek için kursun Hoş geldiniz codelab'ine göz atın.