Duyarlı web tasarımıyla ilgili temel bilgiler

İnternetteki cep telefonu kullanıcılarının sayısı arttıkça, bu tür çözümler web tasarımcılarının içeriği uygun biçimde çeşitli ekran boyutları için uygundur. Duyarlı web tasarımı, başlangıçta Ethan Marcotte, A List Apart'ta, kullanıcıların isteklerine yanıt veren bir tasarım stratejisidir. ve cihazının olanak sağlayan özellikleri tanımlamaya yardımcı olur. Örneğin, Örneğin, duyarlı bir site, içeriği telefonda tek sütunlu görünümde, bilgisayarda iki, masaüstü bilgisayarda ise üç dört sütun yer alıyor.

Ekran genişledikçe widget değişir şekillendirin.

İnternet özellikli cihazların pek çok olası ekran boyutu olduğundan, yeni ekran boyutlarına uyum sağlaması açısından çok önemlidir. Modern duyarlı tasarım, dokunmatik ekranlar gibi etkileşim modlarını da hesaba katar. Amacımız, deneyimi herkes için optimize etmektir.

Görüntü alanını ayarlama

Çeşitli cihazlar için optimize edilmiş sayfaların belgenin ana sorumlusudur. Bu etiket, tarayıcıya sayfanın ve ölçeklendirmeden bahsedeceğiz.

En iyi deneyimi sunmak için, mobil tarayıcılar sayfayı masaüstü ekran genişliği (cihazlara göre değişmekle birlikte genellikle 980px civarındadır), ve yazı tipi boyutlarını büyüterek ve içeriği büyüterek içeriğin içeriği ekrana sığacak şekilde ölçeklendirir. Bu durum, yazı tiplerinin tutarsız görünmesine ve içeriği görmek ve etkileşimde bulunmak için yakınlaştırma yapmasını gerektirir.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

width=device-width meta görüntü alanı değerini kullanmak, sayfanın Cihazdan bağımsız piksel (DIP) cinsinden ekran genişliği (standart bir görsel piksel birimi) (yüksek yoğunluklu bir ekranda çok sayıda fiziksel pikselden oluşabilir). Bu sayfanın farklı ekran boyutlarına uyacak şekilde yeniden düzenlenmesini sağlar.

Ekran görüntüsü:
    uzaklaştırıldığı için okunması zor olan bir sayfa.
Görüntü alanı meta etiketinin olmadığı bir sayfa çok uzaklaştırılmış olarak yüklenir. Bu da metnin okuması zor hale gelir. Glitch ile ilgili bu örneğe bakın.
ziyaret edin.
'nı inceleyin.
Şunun ekran görüntüsü:
    aynı sayfada okunabilecek boyutta
olmasını sağlar.
Görünüm meta etiketi ayarlandığında, sayfayı yakınlaştırmadan okuyabilirsiniz. Glitch ile ilgili bu örneğe bakın.

Bazı tarayıcılar yatay moda döndürürken sayfanın genişlik sabitini ve yeniden düzenlemenizi sağlar. initial-scale=1 değerini eklemek, tarayıcılara CSS pikselleri ile cihazdan bağımsız pikseller arasında 1:1 ilişki ayarlamak için kullanılır cihaz yönünden bağımsız olarak sayfanın tüm ekran ve yatay genişliğinde olmalıdır.

width veya initial-scale içeren <meta name="viewport"> etiketi yok Lighthouse denetimi, HTML'nizin emin olma sürecini otomatikleştirmenize görüntü alanı meta etiketini doğru bir şekilde kullanması gerekir.

İçeriği görüntü alanına göre boyutlandırma

Hem masaüstü hem de mobil cihazlarda kullanıcılar web sitelerini kaydırmaya alışkındır ancak yatay olarak değil. Kullanıcıyı yatay olarak kaydırmaya veya görüntüyü uzaklaştırarak tüm sayfayı görebilirsiniz. Bu durum, kötü bir kullanıcı deneyimine neden olur.

Meta görüntü alanı etiketine sahip bir mobil site geliştirirken, genellikle sayfa içeriğini yanlışlıkla oluşturabilecek nitelikte olan görünüm. Örneğin, görüntü alanından daha geniş bir şekilde görüntülenen bir resim, yatay kaydırma. Bunu önlemek için, içeriğinizi görünüm.

İçerik, görüntü alanı için doğru boyutlandırılmamış Lighthouse denetimi, taşan öğeleri algılama işlemini otomatikleştirmenize yardımcı olabilir. içerik.

Resimler

Sabit boyutlara sahip bir resim, görünüm. Tüm resimlere max-width olarak 100% vermenizi öneririz. Bu şekilde küçülen mevcut alana sığdırmak ve daha fazla uzatılmasını önlerken boyutunu oluşturabilir.

Çoğu durumda, bunu stil sayfanıza aşağıdakileri ekleyerek yapabilirsiniz:

img {
  max-width: 100%;
  display: block;
}

Resmin boyutlarını img öğesine ekleyin

max-width: 100% ayarlamış olsanız bile width ve Tarayıcının alan ayırabilmesi için <img> etiketlerinize height görüntüler. Bu, düzen kaymalarını önlemeye yardımcı olur.

Düzen

Cihazlara göre CSS piksellerinde ekran boyutları ve genişliği büyük farklılık gösterdiğinden, (örneğin, telefonlarla tabletler ve hatta farklı telefonlar arasında) içeriğin iyi bir şekilde oluşturulması için belirli bir görüntü alanı genişliğine bağlı olmaması gerekir.

Geçmişte bu ayar düzen öğelerini yüzde cinsinden gerektiriyordu. Piksel kullanma Ölçümler, kullanıcının küçük ekranlarda sayfayı yatay olarak kaydırmasını gerektirir:

İkinci sütunun büyük bir kısmının görüntü alanının dışında olduğu iki sütunlu düzenin ekran görüntüsü
Piksellerin kullanıldığı kayan düzen. Glitch ile ilgili bu örneğe bakın.

Bunun yerine yüzdelerin kullanılması, sütunların küçük ekranlarda daraltılmasını sağlar. Bunun nedeni, her sütun daima ekran genişliğinin aynı yüzdesini kaplar:

Flexbox, Grid Layout ve Multicol gibi modern CSS düzen teknikleri çok daha kolay bir şekilde oluşturabilirsiniz.

Esnek Kutu

Flexbox'ı farklı bedenlerde bir öğe grubunuz varsa ve bunların hepsinin bir satıra veya birden çok satıra rahatça sığar ve daha küçük öğeler daha az yer kaplar daha büyük alan kaplar.

.items {
  display: flex;
  justify-content: space-between;
}

Öğeleri tek bir satır olarak veya birden çok satıra sarmalanmış şekilde görüntülemek için Flexbox'ı kullanabilirsiniz satır sayısını en üst düzeye çıkarır.

Flexbox hakkında daha fazla bilgi edinin.

CSS Izgara Düzeni

CSS Izgara Düzeni, esnek ızgaralar oluşturur. Önceki kayan reklamlı örnek olarak, tablo düzeninin ve reklam öğelerinin bir bölümünü temsil eden fr birimini olmasını sağlar.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Izgara Düzeni'ni kullanarak istediğiniz kadar öğe içeren normal ızgara düzenleri oluşturabilirsiniz yardımcı olabilir. Kullanılabilir parçaların sayısı ekran boyutu azaldıkça küçülür azalıyor. Aşağıdaki demoda, istenilen sayıda kart içeren bir ızgara gösterilmektedir her satırda en az 200px boyutunda olmalıdır.

CSS ızgara düzeni hakkında daha fazla bilgi edinin.

Çok sütunlu düzen

Bazı düzen türlerinde Çok Sütunlu Düzen (Çoklu Sütun), Bu işlem, column-width özelliğiyle duyarlı sayıda sütun oluşturur. Aşağıdaki demoda sayfa, bu özellik için başka bir 200px sütunu için yer açın.

Çoklu sütun hakkında daha fazla bilgi

Yanıt verme için CSS medya sorguları kullanma

Bazen düzeninizi değiştirmek için daha kapsamlı biraz önce açıklanan tekniklerin izin verdiğinden farklı ekran boyutlarını desteklemelidir. Medya sorguları tam da bu noktada fayda sağlar.

Medya sorguları, CSS stillerine uygulayabileceğiniz ve içeriği oluşturan cihaz türlerine göre bu stillerden yararlanabilirsiniz. Ayrıca genişlik, yükseklik, yön ve renk gibi cihaz özelliklerine göre stili değiştir ve cihazın dokunmatik ekran olarak kullanılıp kullanılmadığı.

Yazdırma için farklı stiller sağlamak üzere bir çıkış türünü hedefleyebilir ve yazdırma stilleri için bir stil sayfası ekleme:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

Yazdırma stillerini ana stil sayfanıza eklemek için bir ortam sorgusu da kullanabilirsiniz:

@media print {
  /* print styles go here */
}

Duyarlı web tasarımında en yaygın sorgular cihaz özelliklerine yöneliktir. düzeninizi dokunmatik ekranlar veya daha küçük ekranlar için özelleştirebilirsiniz.

Görüntü alanı boyutuna dayalı medya sorguları

Medya sorguları, belirli uygulamalarla ilişkili yeni stiller oluşturabilirsiniz. Ekran boyutu sorguları, şunları yapabilirsiniz:

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Tüm bu özellikler mükemmel tarayıcı desteği sunar. Daha ayrıntılı bilgi için tarayıcı destek bilgileri dahil olmak üzere, bkz. width, height, orientation ve en boy oranı MDN'de

Cihaz kapasitesine göre medya sorguları

Mevcut cihaz yelpazesi düşünüldüğünde geliştiriciler, her büyük cihazın normal bir masaüstü veya dizüstü bilgisayar olduğunu ya da küçük bir cihazda dokunmatik ekran kullanıyor. Medya sorgularına bazı yeni eklemeler spesifikasyonlar, her bir test için kullanılan işaretçi türü gibi cihazla etkileşimde bulunabileceği ve kullanıcının işaretçiyi basılı tutup tutamayacağı öğeler.

  • hover
  • pointer
  • any-hover
  • any-pointer

Bu demoyu farklı cihazlarda görüntülemeyi deneyin örneğin normal bir masaüstü bilgisayar ve telefon ya da tablet gibi.

Bu yeni özellikler tüm modern tarayıcılarda iyi bir şekilde desteklenir. Daha fazla bilgi için: hover için MDN sayfaları herhangi bir üzerine gelin işaretçi ve herhangi bir işaretçi.

any-hover ve any-pointer özelliğini kullanın

any-hover ve any-pointer özellikleri kullanıcının işaretçi tutup tutamayacağını test eder öğelerin üzerinde (genellikle fareing olarak adlandırılır) veya üzerinde birincil etkileşim yöntemi değildir. Örneğin, dokunmatik ekranlı bir kullanıcıyı fareye geçiş yapmaya zorlamaktan kaçınmalı. Ancak şu durumlarda any-hover ve any-pointer yararlı olabilir: bir kullanıcının ne tür bir cihaza sahip olduğunu belirler. Örneğin, Ayrıca, dokunmatik ekran ve dokunmatik yüzey, fareyle üzerine gelme yeteneğidir.

Kesme noktaları nasıl seçilir?

Ayrılma noktalarını cihaz sınıflarına veya herhangi bir ürüne, marka adına ya da işletim sistemi. Bu durum, kodunuzun korunmasını zorlaştırır. Bunun yerine, içerik, düzeninin kapsayıcıya sığacak şekilde nasıl değişeceğini belirler.

Küçük adımlarla başlayıp daha sonra yoğunlaşarak önemli ayrılma noktalarını seçin

İçeriği önce küçük bir ekrana sığacak şekilde tasarlayın, sonra ekranı genişletin. gereken süre boyunca devam eder. Bu sayede projenizle ilgili ayrılma noktalarını ayarlayın ve bunları içeriğe göre optimize edin.

Aşağıdaki örnekte, bu sayfanın başı. İlk adım, tahminin belirli bir görünümde iyi görünmesini küçük ekran:

Şunun ekran görüntüsü:
    mobil genişlikte hava durumu uygulaması
Dar bir genişlikteki uygulama.

Ardından, öğeler arasında çok fazla boşluk kalacak şekilde tarayıcıyı yeniden boyutlandırın widget'ın iyi görünmesini sağlayın. Karar özneldir, ancak 600px daha fazladır kesinlikle çok geniştir.

Şunun ekran görüntüsü:
    öğeler arasında geniş boşluklar bulunan bir hava durumu uygulaması
Bu boyutta, uygulamanın düzeni muhtemelen değişecektir.

600px konumuna bir ayrılma noktası eklemek için Bileşen için CSS: tarayıcı 600px veya daha dar olduğunda kullanılır ve biri 600px genişliğinde olduğunda ayarlanır.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Son olarak, CSS'yi yeniden düzenleyin. 600px öğesine sahip max-width için medya sorgusunun içinde, Yalnızca küçük ekranlar için olan CSS'yi ekleyin. İçinde min-width/601px daha büyük ekranlar için CSS ekleyin.

Gerektiğinde küçük ara noktaları seçin

Düzen önemli ölçüde değiştiğinde ana ayrılma noktalarını seçmenin yanı sıra, küçük değişikliklere uyum sağlamak da yararlı olacaktır. Örneğin, ana dallar arasında bir öğedeki kenar boşluklarının veya dolgunun ayarlanmasına yardımcı olabilir. veya düzende daha doğal görünmesi için yazı tipi boyutunu büyütün.

Bu örnek, daha küçük ekran düzenlerini optimize edebilirsiniz. İlk olarak, görüntü alanı açıldığında yazı tipini genişlik 360px değerinden büyük. Daha sonra, yeterli alan olduğunda en yüksek ve en düşük sıcaklıkları aynı çizgide olacak şekilde ayırın ve hava durumu simgeleri büyütüldü.

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

Büyük ekranlarda, tahmin panelinin maksimum genişliğini sınırlandırmanızı öneririz. tam ekran genişliğini kullanmıyor.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Okuma için metni optimize etme

Klasik okunabilirlik teorisi, ideal bir sütunun 70 ile 80 arasında bir sayı içermesi gerektiğini iddia eder. karakter sayısı (İngilizce'de yaklaşık 8-10 kelime) olmalıdır. Bir metin bloğunun genişliği yaklaşık 10 kelimeyi aştığında ayrılma noktası.

Ekran görüntüsü:
    mobil cihazdaki metin sayfası
Mobil cihazdan kısa mesaj gönderin.
ziyaret edin.
'nı inceleyin.
Masaüstü tarayıcıda bir metin sayfasının ekran görüntüsü
Masaüstü tarayıcıda aynı metin; girin.

Bu örnekte, 1em adresindeki Roboto yazı tipi ancak büyük ekranlarda bir ayrılma noktasının olması gerekir. Bu durumda, tarayıcı genişliği 575px değerinden büyükse ideal içerik genişliği 550px şeklindedir.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

İçeriği gizlemekten kaçınma (:#içeriği gizlemekten kaçınma)

Ekran boyutuna bağlı olarak hangi içeriğin gizleneceğini veya gösterileceğini seçerken dikkatli olun. İçeriği sırf ekrana sığdıramayacağınız için gizlemeyin. Ekran boyutu kullanıcının ne görmek isteyebileceğini tahmin etmez. Örneğin, bitki poleni hava durumu tahminindeki sayı, bahar alerjisi için ciddi bir sorun olabilir karar vermek için bu bilgilere ihtiyaç duyan insanlarla dolu olduğunu bilir.

Chrome Geliştirici Araçları'nda medya sorgusu kesme noktalarını görüntüleyin

Medya sorgusu ayrılma noktalarınızı ayarladıktan sonra, bunların sitenizin görünüm. Kesme noktalarını tetiklemek için tarayıcı pencerenizi yeniden boyutlandırabilirsiniz. Chrome Geliştirici Araçları'nda ise bir sayfanın bu sekmenin altında nasıl göründüğünü gösteren yerleşik bir özellik vardır. farklı ayrılma noktaları vardır.

Hava durumu uygulamamızın açık olduğu ve 822 piksel genişliğindeki Geliştirici Araçları ekran görüntüsü.
Hava durumu uygulamasını daha geniş görüntü alanında gösteren Geliştirici Araçları.
ziyaret edin.
'nı inceleyin.
Hava durumu uygulamamızın açık olduğu ve 436 piksel genişliğindeki Geliştirici Araçları ekran görüntüsü.
Hava durumu uygulamasını daha dar bir görüntü alanında gösteren Geliştirici Araçları.

Sayfanızı farklı ayrılma noktaları altında görüntülemek için:

  1. Geliştirici Araçları'nı açın.
  2. Cihaz Modu'nu açın. Bu işlem, duyarlı modda açılır varsayılan olarak.
  3. Medya sorgularınızı görmek için Cihaz Modu menüsünü açıp Medya sorgularını göster. Bu, ayrılma noktalarınızı sayfanızın üzerinde renkli çubuklar olarak gösterir.
  4. Söz konusu medya sorgusu etkinken sayfanızı görüntülemek için çubuklardan birini tıklayın. Bir medya sorgusunun tanımına gitmek için çubuğu sağ tıklayın.