Medya sorguları olmadan uyarlanabilir düzenler oluşturun

Sep 13, 2025

Nasıl Yapılır

Uzun zamandır web sayfalarında mükemmel bir görsel kompozisyona ulaşmaya çalışıyordum. Günlük işlerimde CSS kesme noktaları ile çok fazla acı çekiyorum ve cevap veren yerleşimi yönetmenin ortak yollarından asla memnun değildim. Son zamanlarda, çok havalı olduğunu keşfettim Duyarlı Web Tasarımı Her şeyi basit, tutarlı ve mantıklı hale getiren hile ve sizinle paylaşmak için istekliyim.

Bu makale esas olarak yaratıcı gelişme ile ilgilidir, bu nedenle her ikisi için de: bu tekniği yararlı bulabilecek ön uç geliştiriciler ve genel web üretimi hakkında genel bir anlayış ve nihai çıktının nasıl iyileştirileceği web tasarımcıları. CSS, kesme noktaları ve medya sorgularını zaten bildiğinizi varsayıyorum.

Izgara ve FlexBox ile bir blog oluşturun

Geleneksel yol

Adaptive layouts: breakpoints — BreakPoints, standart olmayan görünümler için tatmin edici olmayan sonuçlara yol açabilir

Taşınabilir cihazlar dünyayı ele geçiriyor. Her türlü cihazın çeşitli web siteleri oluşturma şeklini değiştiriyor. 'Duyarlı bir web sitesi' tarafından çoğu insan sadece masaüstü ve mobil sürümleri varsayar (bazen masaüstü, tablet, mobil). Geleneksel olarak böyle çalışır:

 h1 {
Yazı tipi boyutu: 80px;
}
.container {
Genişlik: 980px;
Marj: 0 Otomatik;
}

@Media (Max-width: 1023px) {
h1 {
Yazı tipi boyutu: 48px;
}
.container {
Genişlik: Otomatik;
Dolgu: 0 30px;
}
}

Aslında, genellikle Web Sitesi Düzeni Cihazımız için yapılmadığımız görüyoruz. Örneğin, Yazı tipi boyutunu nasıl ayarladığımızı görelim. Başlık:

Adaptive layouts — Sadece bir kesme noktası ile garip görünümlü nokta boyutları ile sonuçlanabilir

Görüyorsunuz, bizim & lt; h1 & gt; Başlık, 320px ve 800 piksel genişlikte "Yazı Tipi Boyutu: 48px" ve 1024px ve 2560px'te "Yazı Tipi Boyutu: 80px" vardır.

Tabii ki, daha fazla kesme noktası ekleyebiliriz, ancak farklı cihazların sayısı sayısız! Bu, tasarım özelliklerini çok karmaşık hale getirecek ve kafa karıştırıcı hale getirecek, çünkü hangi değerin hangi ekrana uygulandığını bilmek zor.

Adaptive layouts: font size — Yazı tipi boyutunu her ekranda mükemmelleştirmek için asla yeterince kesme noktası oluşturamazsınız.

Gerçekten ihtiyacımız olan şey şudur:

Viewport Üniteleri

Adaptive layouts: viewpoint units — Viewport birimleri önemlidir, ancak hala işe ihtiyacı var

Bu sorunun çözümü VW ve VH VOWPORT birimlerini içerir. Bunlar, viewport'un genişliğinin / yüksekliğinin 1 / 100'ünü temsil eden uzunluk birimleridir (IE9 + 'dan gelen tarayıcılar tarafından yaygın olarak desteklenir).

Bir web sayfasının özelliklerini boyutuna göre ayarlamak için bunları kullanabiliriz. Durum biraz daha iyi olacak, ama acı hala aynı:

 h1 {
Yazı tipi boyutu: Calc ((80/1920) * 100VW;
}
.container {
Genişlik: 80vw;
Marj: 0 Otomatik;
}

@Media (Max-width: 1023px) {
h1 {
Yazı tipi boyutu: Calc ((48/375) * 100VW;
}
.container {
Genişlik: 90vw;
}
}

Çok büyük ya da çok küçük olup olmadığını asla bilemiyoruz.

Gerçek uyarlanabilir bir düzen sistemi nasıl oluşturabiliriz? 320 pikselden 2560px'a kadar çalışan duyarlı bir web sitesi tasarlıyoruz?

İdeal olarak, mockup'nuz mantığı düzenin arkasındaki açıklamalı ve daha küçük bir çözünürlükten daha büyük bir çözünürlükten nasıl uyduğunu açıklamalıdır:

Çözüm

Adaptive layouts: solution — İşte gerçekten adaptif bir düzen sistemi nasıl yapılır?

Özellikleri küçük bir ekrandan büyük olana sürekli olarak ayarlamak istiyoruz. Kesme noktası yok ve medya sorgusu yok. İstediğimiz şey, her ekran için çalışan tek bir değerdir.

İki değişkenli bir matematik işlevi anahtardır. Örneğin, bir başlık yazı tipi boyutunu ayarlamak istiyorsak, işlev şöyle görünmelidir:

1920x + y = 80
375x + y = 48

1920 - Bir tasarım mockup'ta varsayılan masaüstü genişliği (100VW'a eşittir)
375 - Bir tasarım mockup'ta varsayılan mobil genişlik (100VW'a eşittir)
80 - Masaüstünde İstenilen H1 Başlık Yazı Tipi Boyutu
48 - Cep telefonunuzdaki İstenilen H1 başlık yazı tipi boyutu

Bunlar X ve Y değerleridir:

X = (80 - 48) / (1920 - 375)
x = 0.0207

Y = 80 - 1920 * 0.0207
y = 40.256

Bu değerleri kullanmak için, web sayfasında hesaplamaları gerçekleştirmek için CSS CSS işlevine ihtiyacımız olacak (IE9 + 'dan tarayıcılar tarafından yaygın olarak desteklenir). X * 100 kez saymalıyız (çünkü 1vw birimi = 1/100 izleme alanı genişliğinin).

Orijinal fonksiyonumuzu alıyoruz:
1920x + y = 80
375x + y = 48

1920'yi 100VW ile değiştirin:
100vww * x + y = istenen değer

X ve Y'yi değerlerle değiştirin:
100VW * 0.0207 + 40.256 = İstenilen değer

Son CSS stilini alıyoruz:

 H1 {font boyutu: Calc (2.07vw + 40.25px)}

Şaşırtıcı bir şekilde yeterince, nihayet sadece nasıl istediğimiz çalışıyor!

Tüm ekranlar için sadece bir özellik. Değerlerin tekrar tekrar yazmanıza gerek yok. Her türlü özellikleri ayarlayabilir ve hesaplayabilirsiniz: genişlik, yazı tipi boyutu, dolgu, kenar boşluğu vb.

Bu tekniği kullanarak gerçek bir düzen oluşturmaya çalışalım:

Ancak bu yaklaşımın bir dezavantajı vardır: bu Calc işlevinin arkasında hangi değerinin durduğunu anlamak zordur. Bunu nasıl basitleştirebiliriz?

HTML'yi günlük olarak kodlarsanız, muhtemelen SASS / SCSS ön işlemcileri ile tanışırsınız. İşte sizin için biraz yardım: "Mixin" yapalım ve tüm bu hesaplamaların otomatik olarak gerçekleşmesini sağlayalım ve orijinal değerlerimizi koruyun.

Yukarıda tarif edildiği gibi aynı işlevdir, ancak bir sass karışımı olarak yapılır:

 $ Ekran genişliği: 1920
$ Ekran-Dar: 375

@Mixin Fluid ($ Mülkiyet, $ Minvalue, $ MaxValue)
  $ X: ($ MAXVALUE - $ MINVALUE) / (DOĞRU DOĞU - $ DİKKAT-NARROW)
  $ Y: $ MAXVALUE - $ vitrin * $ x
  # {$ emsal}: calc (# {100 * $ x} vw + # {$ y} px)

h1
  @include sıvı ('yazı tipi', 48,80)

.Container
  @include sıvı ('genişlik', 315,1580)
@include sıvı ('dolgu', 30,60)

Adaptive layouts: mixin — Bir sass karışımı tüm süreci kolaylaştırabilir

Bu teknik Sonunda gerçekten duyarlı web düzenleri oluşturmak için çok sofistike bir çözüm sunar. Tarayıcıların çoğunu destekler, projenizi bir ziyaretçi için doğru şekilde gösterilecek, stillerinizi basitleştirir ve en önemlisi web düzeninizi tutarlı ve mantıklı hale getirir. Umarım bazı şaşırtıcı web projeleri başlatmanıza yardımcı olabilir.

İlgili Makaleler:

17 Gerçekten Yararlı Duyarlı Web Tasarım Öğreticileri
Duyarlı Web Tipografi Kuralları
CSS ızgarası ile duyarlı bir düzen oluşturun

Medya sorguları olmadan uyarlanabilir düzenler oluşturun

Geleneksel yol

Viewport Üniteleri

Çözüm

Nasıl Yapılır - En Popüler Makaleler

GreenSock Animation Platform ile başlayın

Animasyonlu bir bölünmüş ekran açılış sayfası oluşturun

Kendi karakterinizi nasıl yapılır?

Bir tavanın labirent tarzı canavarı nasıl oluşturulur

HTML Video ile Nasıl Çalışılır

Web Geliştirmede Markdown Nasıl Kullanılır

Sitenize görsel ipuçları ekleyin

Blender'de çarpıcı tileable dokular oluşturun

Kategoriler