- Katılım
- 2 Mar 2015
- Konular
- 59,202
- Mesajlar
- 88,466
- Çözüm
- 109
- Online süresi
- 4mo 16d
- Reaksiyon Skoru
- 14,315
- Altın Konu
- 2,411
- TM Yaşı
- 11 Yıl 3 Ay 17 Gün
- Başarım Puanı
- 1,051
- MmoLira
- 696,939
- DevLira
- 234
HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
Responsive Tasarım, web sayfası düzenini TV, monitör vb. maksimum ekran boyutlarından cep telefonları vb. minimum ekran boyutlarına kadar iyi kullanılabilirlik ile herhangi bir ekrana uyarlamayı amaçlayan bir web tasarım yaklaşımıdır. Medya Sorguları, bir web sitesi sayfasının düzenini farklı ekran boyutlarına ve medya türlerine uyarlamasını sağlayan bir CSS3 Özelliğidir. Medya sorguları, kullanıcının cihazının veya görünüm alanının özelliklerine göre belirli stilleri uygulayan CSS kurallarıdır. Bu özellikler ekran genişliğini, yüksekliğini, yönünü, çözünürlüğünü ve daha fazlasını içerebilir.
Sözdizimi:
@media kuralı, medya sorgularını hedeflemek için kullanılır ve ardından cihaz türüne bağlı olarak isteğe bağlı olan medya türünü ve ardından kesme noktası olarak da adlandırılan koşula, koşul doğruysa CSS kuralları parantezden web sayfasına uygulanır. .
Medya Türleri
Ortam Türleri aygıt türünün kategorisini tanımlar. Medya türü isteğe bağlıdır ve varsayılan olarak "tümü" türü olarak kabul edilir. Medya Türleri dört türe ayrılır.
hepsi – tüm cihaz türleri için.
baskı – yazıcılar için
ekran — akıllı telefonlar, tabletler, TV'ler ve bilgisayar ekranları için
konuşma — sayfayı yüksek sesle "okuyan" ekran okuyucular için
Medya Sorguları neden kullanılmalı?
Medya Sorguları, geliştiricilerin tüm cihazlarda tutarlı ve optimize edilmiş bir kullanıcı deneyimi oluşturmasına yardımcı olur. Duyarlı tasarım olmadan, web siteleri belirli ekranlarda dengesiz ve bozuk görünebilir ve bu da kötü kullanıcı deneyimine neden olabilir. Daha iyi bir kullanıcı deneyimi ile ürünün kullanımı kolaylaşacaktır.
Duyarlı Tasarımın Faydaları
Kullanıcı Deneyimini (UX) İyileştirir: Kullanıcılar içeriğe herhangi bir cihazdan sorunsuz ve verimli bir şekilde erişebilir. İster masaüstü bilgisayarda, tablette ister akıllı telefonda olsun, web sitesi optimum ve kullanıcı dostu bir deneyim sağlayacak şekilde uyarlanır. Bu, daha yüksek kullanıcı memnuniyeti ve katılımına yol açar.
İyi SEO: Web siteniz duyarlı olduğunda ve cihazlar arasında tutarlı bir deneyim sağladığında, arama motoru sonuçlarında daha üst sıralarda yer alma olasılığı daha yüksektir. Duyarlı tasarımlar daha üst sıralarda yer alır ve trafiği artırır.
Maliyet Verimliliği: Tüm platformlar için tek bir web sitesi geliştirmek, geliştirme ve bakım maliyetlerini azaltır. Yönetmeniz gereken tek bir kod tabanınız olduğunda bakım ve güncellemeler de basitleşir.
Etkileşimleri Artırır: Kullanıcıların iyi tasarlanmış duyarlı bir sitede kalma ve etkileşimde bulunma olasılıkları daha yüksektir. İyi tasarlanmış duyarlı bir site, kullanıcı etkileşimini artırır. Ziyaretçiler olumlu bir deneyim yaşadığında ve tercih ettikleri cihazlarda içeriğinizde kolayca gezinip etkileşime girebildiklerinde sitenizde kalma olasılıkları daha yüksektir.
Duyarlı Bir Tasarımın Unsurları
Medya Sorguları: Medya sorguları duyarlı tasarımın temelidir. Ekran genişliği, yüksekliği, yönü ve çözünürlüğü gibi özelliklere göre koşulları belirtmenize olanak tanır. CSS'de @media ve ardından koşullar kullanılarak bildirildi. farklı cihazlara veya ekran boyutlarına belirli stiller uygulayabilirsiniz.
Kesme noktaları: Tasarım değişikliklerinin meydana geldiği belirli ekran genişlikleri. Kesme noktaları, tasarım ayarlamaları yaptığınız belirli ekran genişlikleridir (veya bazen yüksekliklerdir). Bu ayarlamalar düzen, tipografi veya belirli öğelerin görünürlüğündeki değişiklikleri içerebilir.
Esnek Düzenler: Yüzdeye dayalı veya değişken ızgaralar kullanın ve sabit genişlik ve yükseklikten kaçının, bunun yerine minimum genişlik, maksimum genişlik, minimum yükseklik ve maksimum yükseklik kullanın. CSS Flexbox ve CSS Grid, esnek düzenler oluşturmaya yönelik güçlü araçlardır.
Görseller: CSS kullanarak veya duyarlı görsel teknikleri kullanarak görselleri ölçeklendirme. Resimler için maksimum genişliği: %100 olarak ayarlamak ve bunların kapsayıcı genişliklerini aşmasını önlemek için CSS'yi kullanın.
Yazı Tipi Boyutları: Farklı ekranlarda okunabilirlik için yazı tipi boyutlarının ayarlanması ve daha iyi yazı tipi hiyerarşisi. Yazı tipi boyutları okunabilirlik ve kullanıcı deneyimi açısından hayati bir rol oynar. Yazı tipi boyutları için sabit piksel değerleri yerine em veya rem gibi göreli birimleri kullanmayı düşünün.
Duyarlı Tasarım Nasıl Çalışır?
Kesme Noktalarını Tanımlayın: Tasarım değişiklikleri için çoğunlukla mobil (320px — 480px), tabletler (481px — 768px), dizüstü bilgisayarlar (769px — 1024px) ve masaüstü bilgisayarlar (1025px — 1200px) için temel ekran genişliklerini belirleyin; bu kesme noktaları endüstri standardıdır. Ancak bunları projenizin gereksinimlerine göre özelleştirebilirsiniz.
Medya Sorguları Yazma: Stilleri kesme noktalarında uygulamak için CSS @media'yı kullanın. Belirli koşullar karşılandığında belirli stilleri uygulayan CSS kurallarıdır. Bu koşullar genellikle minimum genişlik ve maksimum genişlik özelliklerini kullanan ekran genişliğini temel alır
Düzenleri Ayarlayın: Duyarlı düzenler oluşturmak için Flexbox ve CSS Grid gibi CSS özelliklerini kullanın. Bu yerleşim teknikleri, farklı ekran boyutlarına uyum sağlayan esnek ve akıcı bir yapı sağlar.
Çeşitli Cihazlarda Test Edin: Geliştirme araçlarını kullanarak tasarımın farklı ekranlarda iyi çalıştığından emin olun. Tüm cihazlarda kusursuz bir deneyim sağlamak için kullanıcı etkileşimlerine, yükleme sürelerine ve erişilebilirliğe dikkat edin.
Gerektiği Kadar İyileştirin: Sorunsuz bir kullanıcı deneyimi için sürekli olarak optimize edin ve ayarlayın. Duyarlı tasarım devam eden bir süreçtir. Test ettikten sonra geri bildirim toplayın ve kullanıcı deneyimini daha da iyileştirmek için gerekli ayarlamaları yapın.
HTML ve CSS kullanan bir Açılış Sayfasının Ana bölümünün örneği:
Hangi Uygulamalardan Kaçınılmalı?
Medya Sorgularıyla Aşırı Yükleme: Tasarımınız için en kritik olanlara odaklanarak kesme noktalarını akıllıca seçin. Gerekli kesme noktalarının sayısını en aza indirmek için mobil öncelikli bir yaklaşım (mobil stillerle başlayıp gerektiği kadar karmaşıklık ekleyerek) veya Masaüstü öncelikli bir yaklaşım (masaüstü stilleriyle başlayıp gerektiği kadar karmaşıklık ekleyerek) kullanın.
Önce Mobilin İhmal Edilmesi: Tasarım sürecine mobil cihazları göz önünde bulundurarak başlayın. Mobil düzen için sağlam bir temel oluşturun ve medya sorgularını kullanarak bunu daha büyük ekranlar için aşamalı olarak geliştirin. Bu yaklaşım, tasarımınızın tüm cihazlarda işlevsel ve kullanıcı dostu kalmasını sağlar.
Performansı Göz Ardı Etme: Varlıklarınızı web için optimize edin. Görüntüleri sıkıştırın, duyarlı görüntü tekniklerini kullanın ve CSS'yi küçültün. Ek olarak, sayfaların hızlı yüklenmesini sağlamak için yavaş yükleme görselleri kullanmayı ve performans açısından en iyi uygulamaları uygulamayı düşünün.
Test Etme: Gerektiğinde çeşitli cihazlarda, tarayıcılarda ve yönlendirmelerde test edin. Farklı koşulları simüle etmek için geliştirici araçlarını ve çevrimiçi emülatörleri kullanın
İçerik Önceliğini İhmal Etme: Temel içeriği belirleyin ve tüm ekran boyutları için ona öncelik verin. Gerekirse içeriği yeniden düzenlemek için medya sorgularını kullanın ancak temel bilgilerinizin netliğinden ve erişilebilirliğinden asla ödün vermeyin.
Çözüm
CSS medya sorguları duyarlı web tasarımları oluşturmak için vazgeçilmez bir araçtır. Tutarlı ve kullanıcı dostu bir deneyim sunarak web sitelerinin farklı cihazlara zarif bir şekilde uyum sağlamasına olanak tanır. Web geliştiricileri, medya sorgularında uzmanlaşarak ve en iyi uygulamaları takip ederek web sitelerinin modern dijital dünyanın çeşitli ortamına hazır olmasını sağlayabilirler.
Sözdizimi:
CSS:
@media medieType and (condition) {
/* CSS rules that applies if condition is true */
}@media kuralı, medya sorgularını hedeflemek için kullanılır ve ardından cihaz türüne bağlı olarak isteğe bağlı olan medya türünü ve ardından kesme noktası olarak da adlandırılan koşula, koşul doğruysa CSS kuralları parantezden web sayfasına uygulanır. .
Medya Türleri
Ortam Türleri aygıt türünün kategorisini tanımlar. Medya türü isteğe bağlıdır ve varsayılan olarak "tümü" türü olarak kabul edilir. Medya Türleri dört türe ayrılır.
hepsi – tüm cihaz türleri için.
baskı – yazıcılar için
ekran — akıllı telefonlar, tabletler, TV'ler ve bilgisayar ekranları için
konuşma — sayfayı yüksek sesle "okuyan" ekran okuyucular için
Medya Sorguları neden kullanılmalı?
Medya Sorguları, geliştiricilerin tüm cihazlarda tutarlı ve optimize edilmiş bir kullanıcı deneyimi oluşturmasına yardımcı olur. Duyarlı tasarım olmadan, web siteleri belirli ekranlarda dengesiz ve bozuk görünebilir ve bu da kötü kullanıcı deneyimine neden olabilir. Daha iyi bir kullanıcı deneyimi ile ürünün kullanımı kolaylaşacaktır.
Duyarlı Tasarımın Faydaları
Kullanıcı Deneyimini (UX) İyileştirir: Kullanıcılar içeriğe herhangi bir cihazdan sorunsuz ve verimli bir şekilde erişebilir. İster masaüstü bilgisayarda, tablette ister akıllı telefonda olsun, web sitesi optimum ve kullanıcı dostu bir deneyim sağlayacak şekilde uyarlanır. Bu, daha yüksek kullanıcı memnuniyeti ve katılımına yol açar.
İyi SEO: Web siteniz duyarlı olduğunda ve cihazlar arasında tutarlı bir deneyim sağladığında, arama motoru sonuçlarında daha üst sıralarda yer alma olasılığı daha yüksektir. Duyarlı tasarımlar daha üst sıralarda yer alır ve trafiği artırır.
Maliyet Verimliliği: Tüm platformlar için tek bir web sitesi geliştirmek, geliştirme ve bakım maliyetlerini azaltır. Yönetmeniz gereken tek bir kod tabanınız olduğunda bakım ve güncellemeler de basitleşir.
Etkileşimleri Artırır: Kullanıcıların iyi tasarlanmış duyarlı bir sitede kalma ve etkileşimde bulunma olasılıkları daha yüksektir. İyi tasarlanmış duyarlı bir site, kullanıcı etkileşimini artırır. Ziyaretçiler olumlu bir deneyim yaşadığında ve tercih ettikleri cihazlarda içeriğinizde kolayca gezinip etkileşime girebildiklerinde sitenizde kalma olasılıkları daha yüksektir.
Duyarlı Bir Tasarımın Unsurları
Medya Sorguları: Medya sorguları duyarlı tasarımın temelidir. Ekran genişliği, yüksekliği, yönü ve çözünürlüğü gibi özelliklere göre koşulları belirtmenize olanak tanır. CSS'de @media ve ardından koşullar kullanılarak bildirildi. farklı cihazlara veya ekran boyutlarına belirli stiller uygulayabilirsiniz.
Kesme noktaları: Tasarım değişikliklerinin meydana geldiği belirli ekran genişlikleri. Kesme noktaları, tasarım ayarlamaları yaptığınız belirli ekran genişlikleridir (veya bazen yüksekliklerdir). Bu ayarlamalar düzen, tipografi veya belirli öğelerin görünürlüğündeki değişiklikleri içerebilir.
Esnek Düzenler: Yüzdeye dayalı veya değişken ızgaralar kullanın ve sabit genişlik ve yükseklikten kaçının, bunun yerine minimum genişlik, maksimum genişlik, minimum yükseklik ve maksimum yükseklik kullanın. CSS Flexbox ve CSS Grid, esnek düzenler oluşturmaya yönelik güçlü araçlardır.
Görseller: CSS kullanarak veya duyarlı görsel teknikleri kullanarak görselleri ölçeklendirme. Resimler için maksimum genişliği: %100 olarak ayarlamak ve bunların kapsayıcı genişliklerini aşmasını önlemek için CSS'yi kullanın.
Yazı Tipi Boyutları: Farklı ekranlarda okunabilirlik için yazı tipi boyutlarının ayarlanması ve daha iyi yazı tipi hiyerarşisi. Yazı tipi boyutları okunabilirlik ve kullanıcı deneyimi açısından hayati bir rol oynar. Yazı tipi boyutları için sabit piksel değerleri yerine em veya rem gibi göreli birimleri kullanmayı düşünün.
Duyarlı Tasarım Nasıl Çalışır?
Kesme Noktalarını Tanımlayın: Tasarım değişiklikleri için çoğunlukla mobil (320px — 480px), tabletler (481px — 768px), dizüstü bilgisayarlar (769px — 1024px) ve masaüstü bilgisayarlar (1025px — 1200px) için temel ekran genişliklerini belirleyin; bu kesme noktaları endüstri standardıdır. Ancak bunları projenizin gereksinimlerine göre özelleştirebilirsiniz.
Medya Sorguları Yazma: Stilleri kesme noktalarında uygulamak için CSS @media'yı kullanın. Belirli koşullar karşılandığında belirli stilleri uygulayan CSS kurallarıdır. Bu koşullar genellikle minimum genişlik ve maksimum genişlik özelliklerini kullanan ekran genişliğini temel alır
Düzenleri Ayarlayın: Duyarlı düzenler oluşturmak için Flexbox ve CSS Grid gibi CSS özelliklerini kullanın. Bu yerleşim teknikleri, farklı ekran boyutlarına uyum sağlayan esnek ve akıcı bir yapı sağlar.
Çeşitli Cihazlarda Test Edin: Geliştirme araçlarını kullanarak tasarımın farklı ekranlarda iyi çalıştığından emin olun. Tüm cihazlarda kusursuz bir deneyim sağlamak için kullanıcı etkileşimlerine, yükleme sürelerine ve erişilebilirliğe dikkat edin.
Gerektiği Kadar İyileştirin: Sorunsuz bir kullanıcı deneyimi için sürekli olarak optimize edin ve ayarlayın. Duyarlı tasarım devam eden bir süreçtir. Test ettikten sonra geri bildirim toplayın ve kullanıcı deneyimini daha da iyileştirmek için gerekli ayarlamaları yapın.
HTML ve CSS kullanan bir Açılış Sayfasının Ana bölümünün örneği:
CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
nav {
display: flex;
justify-content: center;
align-items: center;
background-color: #32cd32;
}
main {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
height: 80vh;
padding: 64px;
}
button {
background-color: #32cd32;
border: none;
padding: 12px 24px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
width: 200px;
color: white;
}
section {
max-width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
img {
width: 500px;
height: 100%;
}
h2 {
font-size: 64px;
font-weight: 600;
margin-bottom: 16px;
text-align: #32cd32
nav ul {
list-style-type: none;
padding: 24px;
margin: 0;
}
nav li {
display: inline;
margin-right: 20px;
padding: 24px;
}
nav a {
col#32#32cd32 text-decoration: none;
color: black;
padding: 2px;
}
footer {
padding: 12px;
text-align: center;
font-size: 12px;
color: black;
}
.header-tip {
padding: 64px 0px 0px 64px;
}
.latest {
text-decoration: none;
color: black;
border: 1px solid rgb(218, 218, 218);
padding: 8px 12px;
border-radius: 100px;
font-size: x-small;
top: 64px;
left: 64px;
}
.menu-tog#32cd32 display: none;
flex-direction: column;
cursor: pointer;
padding: 10px;
}
.menu-toggle .bar {
width: 25px;
height: 3px;
background-color: wh[HASH=7268]#fff[/HASH]
margin: 3px 0;
transition: 0.4s;
}
.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
}
.menu li {
display: inline;
margin-right: 20px;
}
.menu a {
color: #fff;
text-decoration: none;
}
/* Mobile Styles (320px — 480px) */
@media (max-width: 480px) {
body {
font-size: 14px;
background-color: black;
color: #fff;
}
main {
flex-direction: column;
padding: 24px;
}
.header-tip {
padding: 24px 0px 0px 24px;
}
.latest {
color: white;
}
section {
width: 100%;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
font-size: 32px;
margin-bottom: 12px;
text-align: center;
}
p {
text-align: cente[HASH=7268]#fff[/HASH]menu {
display: none;
flex-direction: column;
background-color: #32cd32;
position: absolute;
top: 60px;
right: 0;
width: 100%;
z-inde[HASH=7268]#fff[/HASH][HASH=7268]#fff[/HASH]7.menu.active {
display: flex;
}
.menu-toggle {
display: flex;
}
nav {
flex-direction: row-reverse;
justify-content: space-between;
background-color: #000;
}
#img-section {
display: none;
}
button {
width: 150px;
}
footer {
color: white;
}
}
/* Tablet Styles (481px — 768px) */
@media (min-width: 481px) and (max-width: 768px) {
main {
flex-direction: column;
padding: 40px;
height: auto#32cd#3##32cd32 {
width: 100%;
}
header-tip {
padding: 40px 0px 0px 40px;
}
img {
width: 100%;
height: 100%;
}
h2 {
font-size: 40px;
margin-bottom: 14px;
text-align: center;
}
p {
text-align: center;
}
footer {
color: white;
}##000tton {
[HASH=251928]#img[/HASH] 100%;
}
}
/* Laptop Styles (769px — 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
main {
padding: 64px;
}
h2 {
font-size: 44px;
margin-bottom: 16px;
}
img {
width: 384px;
height: 100%;
}
}
Hangi Uygulamalardan Kaçınılmalı?
Medya Sorgularıyla Aşırı Yükleme: Tasarımınız için en kritik olanlara odaklanarak kesme noktalarını akıllıca seçin. Gerekli kesme noktalarının sayısını en aza indirmek için mobil öncelikli bir yaklaşım (mobil stillerle başlayıp gerektiği kadar karmaşıklık ekleyerek) veya Masaüstü öncelikli bir yaklaşım (masaüstü stilleriyle başlayıp gerektiği kadar karmaşıklık ekleyerek) kullanın.
Önce Mobilin İhmal Edilmesi: Tasarım sürecine mobil cihazları göz önünde bulundurarak başlayın. Mobil düzen için sağlam bir temel oluşturun ve medya sorgularını kullanarak bunu daha büyük ekranlar için aşamalı olarak geliştirin. Bu yaklaşım, tasarımınızın tüm cihazlarda işlevsel ve kullanıcı dostu kalmasını sağlar.
Performansı Göz Ardı Etme: Varlıklarınızı web için optimize edin. Görüntüleri sıkıştırın, duyarlı görüntü tekniklerini kullanın ve CSS'yi küçültün. Ek olarak, sayfaların hızlı yüklenmesini sağlamak için yavaş yükleme görselleri kullanmayı ve performans açısından en iyi uygulamaları uygulamayı düşünün.
Test Etme: Gerektiğinde çeşitli cihazlarda, tarayıcılarda ve yönlendirmelerde test edin. Farklı koşulları simüle etmek için geliştirici araçlarını ve çevrimiçi emülatörleri kullanın
İçerik Önceliğini İhmal Etme: Temel içeriği belirleyin ve tüm ekran boyutları için ona öncelik verin. Gerekirse içeriği yeniden düzenlemek için medya sorgularını kullanın ancak temel bilgilerinizin netliğinden ve erişilebilirliğinden asla ödün vermeyin.
Çözüm
CSS medya sorguları duyarlı web tasarımları oluşturmak için vazgeçilmez bir araçtır. Tutarlı ve kullanıcı dostu bir deneyim sunarak web sitelerinin farklı cihazlara zarif bir şekilde uyum sağlamasına olanak tanır. Web geliştiricileri, medya sorgularında uzmanlaşarak ve en iyi uygulamaları takip ederek web sitelerinin modern dijital dünyanın çeşitli ortamına hazır olmasını sağlayabilirler.
Son düzenleme:
