İ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.
İ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.
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:
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)orientationaspect-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.
hoverpointerany-hoverany-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:
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.
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ı.
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.
Sayfanızı farklı ayrılma noktaları altında görüntülemek için:
- Geliştirici Araçları'nı açın.
- Cihaz Modu'nu açın. Bu işlem, duyarlı modda açılır varsayılan olarak.
- 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.
- 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.