En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

Duyarlı Web Tasarım - Görünüm


Görünüm nedir?

Görünüm, bir web sayfasının kullanıcının görebileceği alandır.

viewport cihazla değişir ve bir bilgisayar ekranında daha cep telefonu daha küçük olacaktır.

tabletler ve cep telefonları önce, web sayfaları sadece bilgisayar ekranları için tasarlanmış ve web sayfaları statik tasarım ve sabit bir boyuta sahip olması yaygındı bulundu.

Biz tabletleri ve cep telefonlarını kullanarak internette sörf başladı Sonra, sabit boyutlu web sayfaları görünüm sığmayacak kadar büyük. Bunu düzeltmek için, ekrana sığacak şekilde tüm web sayfasını küçültülmüş bu cihazlara tarayıcılar.

Bu mükemmel değildi !! Ama hızlı bir düzeltme.


Görünüm Penceresi Ayarı

HTML5 web tasarımcıları aracılığıyla, görünümün üzerinde kontrol atalım için bir yöntem tanıttı <meta> etiketi.

Aşağıdaki içermelidir <meta> tüm web sayfalarında viewport elemanı:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bir <meta> alanı öğesi sayfanın boyutları ve ölçeklendirme nasıl kontrol edileceğine ilişkin tarayıcı talimatlar verir.

width=device-width kısmı cihazının ekran genişliği takip genişliğini belirler (which will vary depending on the device) .

initial-scale=1.0 kısım sayfa ilk tarayıcı tarafından yüklenen ilk yakınlaştırma düzeyini ayarlar.

İşte görünüm meta etiketi olmadan bir web sayfası ve görünüm meta etiketi ile aynı web sayfasının bir örnektir:

İpucu: Bir telefon veya bir tablet ile bu sayfaya göz yapıyorsanız, farkı görmek için iki linklere tıklayabilirsiniz.



Viewport için Boyut İçerik

Kullanıcılar masaüstü ve mobil cihazlarda hem de dikey olarak web sitelerini kaydırmak için kullanılır - yatay olarak değil!

Kullanıcı yatay kaydırma, yakınlaştırma veya uzaklaştırma zorunda kalır Yani, bu kötü bir kullanıcı deneyimi ile sonuçlanır web sayfasının tamamını görmek için.

Bazı ek kurallar takip etmek:

1. Büyük sabit genişlik elemanları kullanılmalıdır değil - Örneğin, bir görüntü, görüntü alanı yatay kaydırma neden olabilir alanından daha büyük bir genişliğe görüntülenir ise. görüş alanının genişliği sığacak şekilde bu içeriği ayarlamayı unutmayın.

CSS pikseli olarak ekran boyutları ve genişlik cihazlar arasında büyük farklılıklar yana, içerik iyi hale getirmek için belli bir görünüm penceresi genişliği güvenmemelisiniz - 2. içeriği de işlemek için belirli bir görünüm penceresi genişliği güvenmek izin vermeyin.

, Sayfa öğeleri için büyük mutlak CSS genişliklerini ayarlama elemanı daha küçük bir cihaz üzerinde görünüm için çok geniş olmasına neden olur - 3. CSS medya sorgularını küçük ve büyük ekranlar için farklı stil uygulamak için. % 100: Bunun yerine, genişlik gibi göreli genişlik değerleri, seçilebilir. Ayrıca, büyük bir mutlak konum değerleri kullanarak dikkatli olun. Bu eleman, küçük cihazlarda görünümün dışında düşmesine neden olabilir.