Statcounter’da 2021 Q1’deki cihaz pazar paylarına bakılınca mobilin masaüstü cihazları geçtiğini ve yükselmeye devam ettiğini görebiliyoruz. Şu an %54,25 mobil %42,9 masaüstü %2,85 tablet. Yine aynı sitede işletim sistemlerine bakıldığında mobil işletim sistemleri yükselişte.
Böyle olunca developerler eskiden aşağıdaki gibi kodlamaya başlarken:
h1{
font-size: 2rem;
}
@media (max-width: 900px){
h1{
font-size: 3.5rem;
}
}Artık aşağıdaki gibi başlıyorlar:
h1{
font-size: 2rem;
}
@media (min-width: 900px){
h1{
font-size: 3.5rem;
}
}Burada görüldüğü gibi CSS kodu ilk olarak mobil cihazlara göre ayni varsayılan CSS kodu mobil cihazlara göre yazılırken ekran boyutu büyük masaüstü cihazlarda çalışması için @media (min-width: 900px) kullanarak çalışması şeklinde.
Bu akış elbette projeye göre değişebilir ancak varsayılan webde kullanıcıların ziyaret edeceği bir web sitesi ve uygulama için öncelikli olarak mobil CSS yazmak ve öyle başlamak günümüzde doğru olanıdır. Eskiden ben de öncelikli masaüstü site ile başlayıp mobili sonraya bırakıyordum fakat artık benim de önceliğim mobil.
Bu hem sitenin yanıt verme hızını arttıracaktır(mobil cihazlarda) hem de modern framewokler de bu çalışma prensibini benimsemişlerdir uyumludur. Daha fazla bilgi için https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/