Mobil öncelikli duyarlı tasarıma odaklanmaya yol açan bir diğer faktör ise %60 oranında çoğu insanın internete mobil cihazlarından erişmesidir. İnsanların yalnızca %20'si interneti masaüstü bilgisayarlardan kullanıyor.
Bu makale, mobil öncelikli duyarlı tasarım oluşturmaya yönelik talimatları kapsayacaktır.
Mobil Öncelikli Responsive Tasarım Nasıl Kurulur?
İster mobil öncelikli olsun, ister daha büyük ekranlar için olsun, responsive tasarım, aşağıda verilen yöntemler izlenerek oluşturulabilir:
- Mobil öncelikli duyarlı bir tasarım oluşturun.
- Daha büyük ekranlara yönelik duyarlı bir tasarım geliştirmek/oluşturmak için medya sorgusunu kullanın/kullanın.
Yöntem 1: Mobil Öncelikli Duyarlı Tasarım Oluşturun
Öncelikle mobil öncelikli tasarım yaklaşımını oluşturmakla başlayın. Bu amaçla aşağıda verilen adım adım talimatları izleyin.
Adım 1: Bir HTML Yapısı Oluşturun
Öncelikle bir HTML yapısı oluşturun ve bir “ Önyükleme ' içinde
< ul >
< O >< A href = '#' > Ev < / A >< / O >
< O >< A href = '#' > Hakkımızda < / A >< / O >
< O >< A href = '#' > hizmetlerimiz < / A >< / O >
< O >< A href = '#' > Bize Ulaşın < / A >< / O >
< / ul >
< / hayır>
< / başlık>
< h1 > Linux İpucu'na hoş geldiniz < / h1 >
< P > Bir eğitim sitesi. < / P >
< / bölüm>
< / ana>
< P > Linux İpucu Telif Hakkı < / P >
< / altbilgi>
< / vücut >
2. Adım: CSS'yi uygulayın
Gövde bölümünde “ font ailesi ' ile ' sans Serif ”. Ayrıca dolguyu, kenar boşluğunu ve arka plan rengini de ayarlayın. Bundan sonra üstbilgiye, altbilgiye ve gezinmeye CSS uygulayın:
vücut {font ailesi : sans Serif ;
marj : 0 ;
dolgu malzemesi : 0 ;
arka plan rengi : #808080 ;
}
başlık {
arka plan rengi : mor ;
renk : beyaz ;
dolgu malzemesi : 8 piksel ;
}
navigasyon {
liste stili türü : hiçbiri ;
dolgu malzemesi : 0 ;
marj : 0 ;
}
onların gemisi {
marj : 4 piksel 0 ;
}
nav ul li a {
renk : beyaz ;
metin dekorasyonu : hiçbiri ;
}
ana {
dolgu malzemesi : 18 piksel ;
}
alt bilgi {
arka plan rengi : pembe ;
renk : beyaz ;
Metin hizalama : merkez ;
dolgu malzemesi : 8 piksel ;
}
Görülebileceği gibi, aşağıdaki çıktı tasarımın mobil öncelikli duyarlı olduğunu doğruladı:
Yöntem 2: Daha Büyük Ekranlar için Duyarlı Tasarım Oluşturmak İçin Medya Sorgularını Kullanma
Yukarıdaki tasarım tablet ve masaüstü bilgisayar gibi daha büyük ekranlar için de oluşturulabilir. Bu amaçla kullanıcıların CSS'ye medya sorgusunu dahil etmeleri gerekir. Tabletler için genişlik “ 786 piksel ” ve masaüstü bilgisayarlar için “ 1024 piksel ”.
Medya sorgularını uygulamak için öncelikle ' @medya CSS dosyasındaki ” etiketi. Bundan sonra “min-width” özelliğini “ 768 piksel ”. Bu, minimum ekran boyutu '768 piksel' veya üzeri karşılandığında aşağıdaki CSS'nin uygulanacağı anlamına gelir:
@medya ( minimum genişlik : 768 piksel ) {vücut {
yazı Boyutu : 14 piksel ;
}
başlık {
dolgu malzemesi : 18 piksel ;
}
navigasyon {
görüntülemek : esnek ;
}
onların gemisi {
marj : 0 8 piksel ;
}
ana {
görüntülemek : esnek ;
haklı içerik : arasındaki boşluk ;
öğeleri hizala : merkez ;
}
alt bilgi {
dolgu malzemesi : 18 piksel ;
}
}
Aşağıdaki çıktı, tasarımın daha büyük ekranlarda da duyarlı olduğunu gösterdi:
Çözüm
Mobil öncelikli duyarlı tasarım oluşturmak için öncelikle bir HTML yapısı oluşturun ve görünüm penceresini ekleyin. Bundan sonra CSS dosyasını head etiketine bağlayın. Ardından, mobil öncelikli duyarlı tasarımı temel alan CSS'yi uygulayın. Ayrıca kullanıcılar, mobil cihazda ayarlamak için CSS medya sorgusunu ekleyebilir. Bu yazıda, mobil öncelikli duyarlı tasarım oluşturmaya yönelik ayrıntılı bir prosedür gösterilmiştir.