Web siteleri / web uygulamaları geliştirmek istiyorsanız, duyarlı tasarımların nasıl oluşturulacağını bilmek başarınız için çok önemlidir.
Geçmişte, farklı ekran boyutlarına iyi uyum sağlayan web sitelerinin oluşturulması, web sitesi sahiplerinin bir geliştiriciden talep etmesi gereken bir lükstü. Bununla birlikte, akıllı telefonların ve tabletlerin kullanımındaki artış, artık duyarlı tasarımı yazılım geliştirme dünyasında bir zorunluluk haline getirdi.
Medya sorgularını kullanmak, web sitenizin / web uygulamanızın her cihazda tam olarak istediğiniz şekilde görünmesini sağlamanın en iyi yoludur.
Duyarlı Tasarımı Anlamak
Özetle, duyarlı tasarım, çeşitli ekran boyutlarına uyum sağlayan bir web sitesi / web uygulaması düzeni oluşturmak için HTML / CSS kullanmayı ele alır. HTML / CSS'de, bir web sitesi tasarımında yanıt vermenin birkaç farklı yolu vardır:
- Piksel (px) yerine rem ve em birimlerini kullanma
- Her web sayfasının görüntü alanını / ölçeğini ayarlama
- Medya sorgularını kullanma
Medya sorgusu, CSS3 sürümünde yayınlanan bir CSS özelliğidir. Bu yeni özelliğin tanıtılmasıyla, CSS kullanıcıları, bir web sayfasının görüntüsünü cihaz / ekran yüksekliği, genişliği ve yönüne (yatay veya dikey mod) göre ayarlama olanağına sahip olurlar.
Daha fazla oku: Temel CSS3 Özellikleri Hile Sayfası
Ortam sorguları, bir kez kod oluşturmak ve programınız boyunca birden çok kez kullanmak için bir çerçeve sağlar. Yalnızca üç web sayfası içeren bir web sitesi geliştiriyorsanız bu pek yararlı görünmeyebilir, ancak yüzlerce farklı web sayfası olan bir şirket için çalışıyorsunuz - bu, çok büyük bir zaman olacak koruyucu.
Medya sorgularını kullanırken dikkate almanız gereken birkaç farklı şey vardır: yapı, yerleşim, aralık ve bağlantı.
@media only / not media-type ve (ifade) {
/ * CSS kodu * /
}
Bir medya sorgusunun genel yapısı şunları içerir:
- @Media anahtar sözcüğü
- Not / only anahtar kelimesi
- Bir medya türü (ekran, baskı veya konuşma olabilir)
- "Ve" anahtar kelimesi
- Parantez içine alınmış benzersiz bir ifade
- Bir çift açık ve kapalı küme parantezi içine alınmış CSS kodu.
İlişkili: Belgeleri Yazdırmak için Biçimlendirmek için CSS Kullanma
@media yalnızca ekran ve (maks. genişlik: 450 piksel) {
vücut{
arka plan rengi: mavi;
}
}
Yukarıdaki örnek, CSS stilini (özellikle mavi arka plan rengi) yalnızca 450 piksel ve altı genişliğe sahip cihaz ekranlarına, yani temelde akıllı telefonlara uygular. "Sadece" anahtar sözcüğü "değil" anahtar sözcüğü ile değiştirilebilir ve daha sonra yukarıdaki medya sorgusundaki CSS stili yalnızca yazdırma ve konuşma için geçerli olur.
Bununla birlikte, varsayılan olarak, genel bir medya sorgusu bildirimi üç medya türünün tümü için geçerlidir, bu nedenle amaç bir veya daha fazlasını hariç tutmak olmadığı sürece bir medya türü belirtmeye gerek yoktur.
/ * akıllı telefonlar için tasarım * /
@media (maks. genişlik: 450 piksel) {
vücut{
arka plan rengi: mavi;
}
}
Bir medya sorgusu, bir CSS özelliğidir; bu nedenle yalnızca stil dili içinde kullanılabilir. Kodunuza CSS eklemenin üç farklı yolu vardır; ancak, bu yöntemlerden yalnızca ikisi, programlarınıza medya sorgularını dahil etmenin pratik bir yolunu sağlar - dahili veya harici CSS.
Dahili yöntem,
Harici yöntem, harici bir CSS dosyasında bir ortam sorgusu oluşturmayı ve bunu, etiket.
Medya sorguları ister dahili ister harici CSS aracılığıyla kullanılıyor olsun, stil dilinin bir medya sorgusunun işleyişini olumsuz yönde etkileyebilecek önemli bir yönü vardır. CSS'nin bir öncelik sırası kuralı vardır. Kullanırken CSS seçiciveya bu durumda bir ortam sorgusu, CSS dosyasına eklenen her yeni ortam sorgusu, daha önce geleni geçersiz kılar (veya önceliğini alır).
Yukarıda sahip olduğumuz varsayılan medya sorgu kodu, akıllı telefonları (450 piksel genişliğinde ve altı) hedeflediğinden, Tabletler için farklı arka plan, aşağıdaki kodu önceden var olan CSS dosyanıza kolayca ekleyebileceğinizi düşünebilirsiniz.
/ * tabletler için tasarım * /
@media (maks. genişlik: 800 piksel) {
vücut{
arka plan rengi: kırmızı;
}
}
Tek sorun, öncelik sırasına bağlı olarak tabletlerin kırmızı bir arka plan rengine sahip olması ve akıllı telefonların artık kırmızı bir arka plan rengine sahip olması çünkü 450 piksel ve altı 800 pikselin altında.
Bu küçük sorunu çözmenin bir yolu, tabletler için medya sorgusunu akıllı telefonlar için olanlardan önce eklemektir; ikincisi ilkini geçersiz kılar ve artık mavi arka plan rengine sahip akıllı telefonlara ve kırmızı arka plan rengine sahip tabletlere sahip olursunuz.
Bununla birlikte, öncelik sırası hakkında endişelenmeden akıllı telefonlar ve tabletler için ayrı bir stil elde etmenin daha iyi bir yolu var. Bu, geliştiricinin maksimum ve minimum genişliğe (aralık) sahip bir ortam sorgusu oluşturabildiği, aralık belirtimi olarak bilinen bir ortam sorguları özelliğidir.
/ * tabletler için tasarım * /
@media (maks. genişlik: 800 piksel) ve (min-genişlik: 451) {
vücut{
arka plan rengi: kırmızı;
}
}
Yukarıdaki örnekte, medya sorgularının bir stil sayfası içine yerleştirilmesi, tabletlerin ve akıllı telefonların tasarımı iki ayrı genişlik koleksiyonunu hedeflediğinden önemsiz hale gelir.
Medya sorgularını CSS kodunuza gömmek istemiyorsanız, kullanabileceğiniz alternatif bir yöntem vardır. Bu yöntem, medya sorgularının kullanılmasını içerir. bir HTML dosyasının etiketini kullanın, bu nedenle için stil tercihlerini içeren büyük bir stil sayfasına sahip olmak yerine akıllı telefonlar, tabletler ve bilgisayarlar - üç ayrı CSS dosyası kullanabilir ve ortam sorgularınızı şurada oluşturabilirsiniz: etiket.
etiketi, CSS stilini harici bir stil sayfasından içe aktarmak için kullanılan bir HTML öğesidir. Bu etiket, bir medya sorgusunun CSS'de olduğu gibi çalışan bir medya özelliğine sahiptir.
ana stil sayfası
tablet stil sayfası
href = "tablet.css">
akıllı telefon stil sayfası
Yukarıdaki kod,
HTML dosyanızın etiketi. Şimdi yapmanız gereken tek şey main.css, tablet.css ve smartphone.css dosya adlarıyla üç ayrı CSS dosyası oluşturmak ve ardından her cihaz için istediğiniz özel tasarımı oluşturmaktır.Ana dosyadaki stil 800 pikselden büyük tüm ekranlara uygulanacak, tablet dosyasındaki stil uygulanacaktır. 450px ile 801px arası genişliğe sahip tüm ekranlara ve akıllı telefon dosyasındaki stil aşağıdaki tüm ekranlara uygulanacaktır 451px.
Bu makalenin sonuna kadar geldiyseniz, duyarlı tasarımın ne olduğunu ve neden yararlı olduğunu öğrenebildiniz. Artık CSS ve HTML dosyalarındaki medya sorgularını tanımlayabilir ve kullanabilirsiniz. Ek olarak, CSS'de öncelik sırası ile tanıştınız ve bunun medya sorgularınızın işleyişini nasıl etkileyebileceğini gördünüz.
İmaj Kredisi: Negatif Alan /Pexels
CSS, web sayfalarını şekillendirmek için güçlü bir araçtır. Bir arka plan resminin nasıl yerleştirileceğini öğrenmek size CSS ile ilgili birçok temel bilgiyi öğretir.
Sonrakini Oku
- Programlama
- Web Geliştirme
- Web Tasarım
- CSS
Kadeisha Kean, Tam Yığın Yazılım Geliştiricisi ve Teknik / Teknoloji Yazarıdır. En karmaşık teknolojik kavramlardan bazılarını basitleştirme konusunda farklı bir yeteneği var; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazma, ilginç yazılım geliştirme ve dünyayı dolaşma (belgeseller aracılığıyla) konusunda tutkulu.
Haber bültenimize abone ol
Teknoloji ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için haber bültenimize katılın!
Bir adım daha…!
Lütfen size az önce gönderdiğimiz e-postadaki e-posta adresinizi onaylayın.