- 21 Mar 2021
- 1,314
- 370
- Çevrimiçi zamanı
- 7d 8h 48m
- 153
- Best answers
- 0
- Oyuncu
- Metin2
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.
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 çok yararlı görünmeyebilir, ancak yüzlerce farklı web sayfası olan bir şirket için çalışıyorsanız - bu, çok büyük bir zaman tasarrufu sağlayacaktır.
Kod:
Bir medya sorgusunun genel yapısı şunları içerir:
Kod:
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.
Kod:
Dahili yöntem, <style> etiketinin HTML dosyasının <head> etiketine eklenmesini ve medya sorgusunun <style> etiketinin parametreleri içinde oluşturulmasını içerir.
Harici yöntem, harici bir CSS dosyasında bir ortam sorgusu oluşturmayı ve bunu <link> etiketi aracılığıyla HTML dosyanıza bağlamayı içerir.
Yukarıda sahip olduğumuz varsayılan medya sorgu kodu, akıllı telefonları (450 piksel genişliğinde ve altı) hedeflemektedir; bu nedenle, tabletler için farklı bir arka plan ayarlamak isterseniz, aşağıdaki kodu önceden var olan CSS dosyanıza ekleyebileceğinizi düşünebilirsiniz.
Kod:
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.
Kod:
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.
<link> etiketi, harici bir stil sayfasından CSS stilini 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.
Kod:
Yukarıdaki kod, HTML dosyanızın <head> etiketine yerleştirilmelidir. Ş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 450 piksel ile 801 piksel arasında genişliğe sahip tüm ekranlara ve akıllı telefon dosyasındaki stil aşağıdaki tüm ekranlara uygulanacaktır. 451px.
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 Sorguları Nelerdir?
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 cihaz / ekran yüksekliği, genişliği ve yönüne (yatay veya dikey mod) göre bir web sayfasının görüntüsünü ayarlama becerisi kazanırlar.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 çok yararlı görünmeyebilir, ancak yüzlerce farklı web sayfası olan bir şirket için çalışıyorsanız - bu, çok büyük bir zaman tasarrufu sağlayacaktır.
Medya Sorgularını Kullanma
Medya sorgularını kullanırken göz önünde bulundurmanız gereken birkaç farklı şey vardır: yapı, yerleşim, aralık ve bağlantı.Medya Sorgu Yapısı Örneği
Kod:
Kod:
@media only/not media-type and (expression){
/*CSS code*/
}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.
Tek Anahtar Kelime İçeren Bir Medya Sorgusu Örneği
Kod:
Kod:
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}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.
Varsayılan Ortam Sorgusu Örneği
Kod:
Kod:
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}Medya Sorgularının Yerleştirilmesi
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, <style> etiketinin HTML dosyasının <head> etiketine eklenmesini ve medya sorgusunun <style> etiketinin parametreleri içinde oluşturulmasını içerir.
Harici yöntem, harici bir CSS dosyasında bir ortam sorgusu oluşturmayı ve bunu <link> etiketi aracılığıyla HTML dosyanıza bağlamayı içerir.
Medya Sorgularının Aralığı
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. Bir CSS seçici veya bu durumda bir medya sorgusu kullanırken, CSS dosyasına eklenen her yeni medya 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ı) hedeflemektedir; bu nedenle, tabletler için farklı bir arka plan ayarlamak isterseniz, aşağıdaki kodu önceden var olan CSS dosyanıza ekleyebileceğinizi düşünebilirsiniz.
Tablet Ortamı Sorgu Örneği
Kod:
Kod:
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}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.
Aralık Örneğiyle Tablet Ortam Sorgusu
Kod:
Kod:
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}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ı Bağla
Medya sorgularını CSS kodunuza gömmek istemiyorsanız, kullanabileceğiniz alternatif bir yöntem vardır. Bu yöntem, bir HTML dosyasının <link> etiketinde medya sorgularını kullanmayı içerir, bu nedenle akıllı telefonlar, tabletler ve bilgisayarlar için stil tercihlerini içeren büyük bir stil sayfasına sahip olmak yerine, üç ayrı CSS dosyası kullanabilir ve ortam sorgularınızı içinde oluşturabilirsiniz. <link> etiketi.<link> etiketi, harici bir stil sayfasından CSS stilini 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.
Bağlantı etiketi Örneğinde Medya Sorgularını Kullanma
Kod:
Kod:
<!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">Yukarıdaki kod, HTML dosyanızın <head> etiketine yerleştirilmelidir. Ş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 450 piksel ile 801 piksel arasında genişliğe sahip tüm ekranlara ve akıllı telefon dosyasındaki stil aşağıdaki tüm ekranlara uygulanacaktır. 451px.