Çarşamba 22 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Responsive CSS Tasarımda Dikkat Edilmesi Gereken 5 Nokta
 Responsive CSS Tasarımda Dikkat Edilmesi Gereken 5 Nokta
Arayüz CSS İpuçları Yazılım

Responsive CSS Tasarımda Dikkat Edilmesi Gereken 5 Nokta

Yazar : Sevim Selin Özsoy 14 Aralık 2021 0 Comment

İçindekiler

  • Responsive Tasarım Ne Demek?

  • Responsive Tasarımlarda Dikkat Edilmesi Gerekenler

    • Padding/Border/Margin

    • Box Sizing

    • Flex-wrap

    • Em/Rem/ Percentages(Yüzdeler)

    • Media Query

CSS bazen tam bir baş belası olabiliyor. Özellikle de “responsive” kısmı. Mükemmel bir frontend geliştiricisi değilseniz, CSS gerçekten sıkıcı olabiliyor ve oldukça fazla zaman harcayabiliyorsunuz. Bu nedenle birçok geliştirici web sitesi geliştirirken CSS’le fazla uğraşmayarak, ortalama dizaynlar ortaya çıkarıyorlar. Fakat gerçekten emek harcandığında CSS ile çok farklı ve canlı tasarımlar ortaya çıkarmak pekala mümkün.

Bu yazımda sizlere, responsive bir tasarım yaparken dikkat etmeniz gereken önemli konuları paylaşacağım.

Responsive Tasarım Ne Demek?

Günümüzde 5 milyara yakın kullanıcı internete mobil cihazlarla eriştiğinden dolayı; responsive tasarım, web programlama sektöründe çok önemli bir kavram oldu. Responsive tasarımlar,kısaca web sitesinin kendisini ekran veya pencere boyutuna göre ayarlayabildiği tasarımlardır.

Responsive Tasarımlarda Dikkat Edilmesi Gerekenler

Padding/Border/Margin

Web sitesi oluştururken, her şeyin yerli yerinde ve çekici gözükmesi için sıklıkla padding/border/margin kullanırız. Responsive tasarım yaparken bu kavramları olabildiğince az kullanmak, sitenin boyutu küçüldüğünde oluşabilecek bozuklukları minimuma indirir.

Box Sizing

Sitenin HTML dosyasında percentage(yüzde) width ile birlikte box-sizing kullanmanız padding yüzünden oluşacak sorunları büyük bir ölçüde engeller. Box-sizing’in temelde yaptığı şey, elementin içinde olan bütün bileşenleri sayfanın boyutu değiştikçe aynı oranda büyüklüklerini değiştirmektir.

{box-sizing : border box;} 

Flex-wrap

Flex-wrap, HTML elementlerini(<div>,<p>,…) düzenlemek için kullanılır yani sayfanızın genel görünümünü belirlerken kullandığınız bir özelliktir. Elementleri tek bir sıra halinde veya birden fazla sıra halinde wraplenip sayfa üzerinde gözükmesini sağlar.

Em/Rem/ Percentages(Yüzdeler)

Responsive tasarımlarda büyüklük birimi olarak px yerine em, rem ve yüzdeler kullanılmalıdır. Px kullanıldığı takdirde, kullanıldığı element kitlenir, yani tekrardan boyutlanmaz. Bu nedenle yapılan tasarım farklı ekran ve pencerelere göre boyutlanamaz.

Media Query

Media Query’ler aslında mantıksal ifadelerdir. Örneğin, “Kullanıcının ekranının genişliği belirlenen genişlikten büyük mü?” veya “Belirlenen çözünürlük, kullanıcılara uygun mu?” gibi sorunları media query kullanarak çözebiliriz. Kullanıcının ihtiyacı olan özellikleri belirleyip stil dosyasına yansıtmamızı sağlar.

Bu yazımda benim sıralayacağım önemli noktalar bu kadardı. Sizin de aklınıza gelen veya eklemek istediğiniz önemli konular varsa aşağı yorum olarak yazabilirsiniz! Mutlu Kodlamalar! 

Etiketler: CSS html responsive design web tasarım webmaster
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.