Bu makale, aşağıdakileri kullanarak HTML ve CSS'de duyarlı bir web sitesi tasarımı oluşturma adımlarını göstermektedir:
HTML ve CSS ile Duyarlı Web Sitesi Tasarımı Nasıl Oluşturulur?
HTML ve CSS ile duyarlı bir web sitesi tasarımı oluşturmak, farklı ekran boyutlarına ve çözünürlüklerine uyum sağlayan bir düzen oluşturmayı içerir. Duyarlı bir web sitesi tasarımı oluşturmak için izleyebileceğiniz adımlar şunlardır:
1. Adım: Viewport Meta Etiketi
“ görüntü alanı ” meta etiketi, duyarlı web tasarımının oluşturulmasında hayati bir rol oynar. “” içine eklenir.
< meta isim = 'görüntü alanı' içerik = 'genişlik=cihaz genişliği,ilk-ölçek=1' / >
Yukarıdaki meta etiketinin iki özelliği vardır:
- “ isim ” niteliği, bu etiketin oluşturulduğu/kullanıldığı işlevin adını söyler. Örneğin, “ görüntü alanı ” “a isim ” özelliği, farklı cihazların görüntü alanıyla ilgilenmek için kullanılır.
- “ içerik ” özniteliği önceki öznitelik değerini tanımlar. Her cihazın genişliğini ayarlar ve belgeyi/web sayfasını %100'e ölçeklendirir.
2. Adım: Duyarlı Görüntüler
Görüntü boyutu birbirinden farklı olduğu için aynı “ ayarını yapmak zordur. yükseklik ' veya ' Genişlik ” her resim için özellik. Görüntünün boyutu sabitlendiğinde, kullanıcılar web sayfası görüntüsünü ekranla birlikte yeniden boyutlandırmaz. Ancak, kullanıcılar duyarlı görüntüyü aşağıdaki kod aracılığıyla ayarlayabilir:
img {
maks- Genişlik : 100 %;
}
“ maksimum genişlik ” CSS özelliği, görüntünün kendisine ayrılan alanda görüntülenmesini kısıtlar. Değeri '%' olarak ayarlayarak görüntü, ana öğesinin yeniden boyutuyla birlikte yeniden boyutlandırılır. Bu, görüntü için duyarlı bir etki yaratır.
3. Adım: Flexbox Düzeni
Duyarlı bir web sitesi tasarımı oluşturmak için Flexbox düzeni şiddetle tavsiye edilir. HTML öğelerinin belirli bir konumda görüntülenmesine ve her çocuk için kullanılabilir alanı üst div tarafından sağlanan boyuta göre yeniden boyutlandırmasına izin verir. Flexbox düzeni, geliştiriciye aşağıdaki kodda olduğu gibi çok fazla özgürlük sağlayan birkaç özellik içerir:
< stil >
.ebeveyn {
ekran: esnek;
}
.çocuk {
esnek: 1 ;
metin- hizalamak : merkez;
}
< / stil >
< vücut >
< div sınıf = 'ebeveyn' >
< div sınıf = 'çocuk' stil = 'kenarlık: 3 piksel katı mavi menekşe;' >hoş geldiniz< / div >
< div sınıf = 'çocuk' stil = 'kenarlık: 3 piksel katı koyu yeşil;' >için< / div >
< div sınıf = 'çocuk' stil = 'kenarlık: 3px sabit kırmızı;' >Linuxint< / div >
< / div >
< / vücut >
Yukarıdaki kod parçacığında:
- İlk olarak, kimliği “ olan bir üst div öğesi oluşturun. ebeveyn ' içinde '
' etiket. - Ardından, birden çok alt div öğesi oluşturun ve onlara bir “ sınıfı atayın. çocuk ”.
- Ardından, “ ebeveyn ” sınıflandırın ve “ değerini sağlayın esnek ” CSS için “ görüntülemek ' mülk.
- Bundan sonra, 'değerini sağlayın 1 ” “a esnek 'her birine mülk' çocuk ” Alt öğenin esnek olarak görüntülenmesini sağlayan sınıf.
Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Yukarıdaki çıktı, tarayıcı yeniden boyutlandırıldığında alt öğenin eşit genişlikte olduğunu gösterir.
Adım 4: Izgara Düzeni
Izgara düzeni bir ızgara oluşturur ve ızgara bölümünün içindeki HTML öğelerini atar. Izgara öğeleri, web sayfasının ekran boyutuna göre değişir. Cihaz ekranına göre HTML öğesi boyutu değiştiği için duyarlı bir tasarım oluşturur:
< stil >.konteyner {
ekran: ızgara;
ızgara şablonu sütunları: 1fr 1fr 1fr;
}
< / stil >
< vücut >
< div sınıf = 'bileşen' >
< div stil = 'kenarlık: 3px düz orman yeşili;' >Linuxint< / div >
< div stil = 'kenarlık: 3 piksel katı koyu yeşil;' >Linuxint< / div >
< div stil = 'kenarlık: 3px düz kırmızı;' >Linuxint< / div >
< / div >
< / vücut >
Yukarıdaki kodda:
- İlk olarak, bir ebeveyn div oluşturun ve ona bir “ sınıfı atayın. bileşen ' içinde '
' etiket. Bundan sonra, içinde üç alt div öğesi oluşturun. - Ardından, CSS dosyasında bir “ atayın Kafes ” değeri “ görüntülemek “ için mülk konteyner ” div.
- Bundan sonra, “” kullanarak web sayfasında eşit boyutta üç bölüm oluşturun. ızgara-şablon-sütun ” özelliği ve “ olarak ayarlayın 1fr 1fr 1fr ' burada f ' anlamına gelir kesir ”.
Yukarıdaki kodu derledikten sonra çıktı şöyle görünür:
Çıktı, div'lerin kendilerini ekran boyutuna göre eşit oranlarda yeniden boyutlandırdığını gösterir.
5. Adım: Medya Sorguları
Duyarlı tasarım yapmak için medya sorgularının kullanılması eski usul bir şeydir ancak yine de çoğu web sitesi medya sorguları kullanır. Medya sorguları, seçilen HTML öğesi için varsayılan stil eklendikten sonra doğrudan CSS dosyasına eklenebilir. Medya sorgusu, kodu biraz daha uzun ve dağınık hale getirir. Çünkü geliştiricinin her ekran boyutu için ayrı ayrı kod girmesi gerekiyor.
Örneğin, aşağıdaki kod parçasına bakın:
@ medya ekran ve ( dakika- Genişlik : 640 piksel ) {.bileşen {
arka plan- renk : Orman yeşili;
}
}
Yukarıdaki kod parçacığında:
- İlk olarak, seçilen öğe sınıfına CSS özelliklerini uygulayan medya sorgusunu ayarlayın ' bileşen ” ekran boyutu genişliği “ den büyük olduğunda 640 piksel ”.
- Ardından, 'bileşen sınıfını seçin ve' değerini ayarlayın. Orman yeşili ' için ' arka plan rengi ' mülk.
.bileşen {
arka plan- renk : dodgerblue;
}
}
Sonra yukarıdaki kod parçacığı için:
- Medya sorgusunu, genişlik boyutu ''den küçük olduğunda stilleri uygulayacak şekilde ayarlayın. 1000 piksel ”.
- Şimdi, “ bileşen ' sınıflandırın ve ' değerini sağlayın dodgerblue ' için ' arka plan rengi ' mülk:
Yukarıdaki kod parçacıklarını çalıştırdıktan sonra çıktı şöyle görünür:
Çıktı, medya sorgusunun ekran boyutuna göre arka planı değiştirdiğini gösterir. Yazı tipi boyutu, genişlik, yükseklik ve diğer CSS özellikleri de aynı kalıp izlenerek uygulanabilir.
Ortam sorguları kullanılırken dikkate alınması gereken olası kesme noktaları ekran boyutları şunlardır:
- İçin ' küçük ” ekran boyutu, genişliği şundan daha küçük olarak ayarlayın: “ 640 piksel ”.
- İçin ' orta ” görünüm alanı ekran boyutu, genişlik “ arasında değişmektedir. 641 piksel ' Ve ' 1007 piksel ”.
- İçin ' büyük ” ekran boyutu, genişliği “ olarak ayarlayın 1008 piksel ” veya daha büyük.
Çözüm
Duyarlı bir web sitesi tasarımı oluşturmak için geliştiricilerin “ görünüm alanı “” etiketi