Toinen tekijä, joka johtaa keskittymiseen mobiililähtöiseen suunnitteluun, on se, että useimmat ihmiset käyttävät Internetiä mobiililaitteidensa kautta, mikä on 60 %. Vaikka vain 20% ihmisistä käyttää Internetiä pöytäkoneilla.
Tämä artikkeli kattaa ohjeet mobiililähtöisen responsiivisen suunnittelun luomiseen.
Kuinka ottaa käyttöön Mobile-First Responsive Design?
Responsiivinen suunnittelu, olipa se sitten mobiililaitteille reagoiva tai suurempia näyttöjä varten, voidaan luoda seuraavilla menetelmillä:
- Luo mobiililähtöinen muotoilu.
- Käytä/hyödynnä mediakyselyä kehittääksesi/luoksesi reagoivan suunnittelun suuremmille näytöille.
Tapa 1: Luo mobiililähtöinen muotoilu
Aloita ensin mobiililähtöisen suunnittelun luomisesta. Käy tätä varten läpi alla olevat vaiheittaiset ohjeet.
Vaihe 1: Luo HTML-rakenne
Luo ensin HTML-rakenne ja lisää ' Bootstrap ”-ssa
< ul >
< että >< a href = '#' > Koti < / a >< / että >
< että >< a href = '#' > Meistä < / a >< / että >
< että >< a href = '#' > palvelumme < / a >< / että >
< että >< a href = '#' > Ota meihin yhteyttä < / a >< / että >
< / ul >
< / ei>
< / otsikko>
< h1 > Tervetuloa Linux Hintiin < / h1 >
< s > Opetussivusto. < / s >
< / jakso>
< / pää>
< s > Linux-vinkki Tekijänoikeus < / s >
< / alatunniste>
< / kehon >
Vaihe 2: Ota CSS käyttöön
Aseta runko-osioon ' font-perhe ”–” ilman serifiä ”. Aseta myös täyte, marginaali ja taustaväri. Käytä sen jälkeen CSS:ää ylä-, alatunnisteessa ja navigaatiossa:
kehon {font-perhe : ilman serifiä ;
marginaali : 0 ;
pehmuste : 0 ;
taustaväri : #808080 ;
}
otsikko {
taustaväri : violetti ;
väri : valkoinen ;
pehmuste : 8px ;
}
nav ul {
lista-tyylinen : ei mitään ;
pehmuste : 0 ;
marginaali : 0 ;
}
heidän aluksensa {
marginaali : 4px 0 ;
}
nav ul li a {
väri : valkoinen ;
teksti-sisustus : ei mitään ;
}
pää {
pehmuste : 18px ;
}
alatunniste {
taustaväri : vaaleanpunainen ;
väri : valkoinen ;
tekstin tasaus : keskusta ;
pehmuste : 8px ;
}
Kuten voidaan havaita, alla oleva tulos on vahvistanut, että suunnittelu on mobiilien ensisijainen:
Tapa 2: Käytä mediakyselyjä luodaksesi reagoivan suunnittelun suuremmille näytöille
Yllä oleva malli voidaan luoda myös suuremmille näytöille, kuten tableteille ja pöytäkoneille. Tätä tarkoitusta varten käyttäjien on sisällytettävä mediakysely CSS:ään. Tablettien leveys on ' 786 pikseliä 'ja pöytäkoneille on ' 1024 pikseliä ”.
Käytä mediakyselyitä lisäämällä ensin ' @media ' -tunniste CSS-tiedostossa. Määritä sen jälkeen 'min-width' -ominaisuus ' 768 pikseliä ”. Tämä tarkoittaa, että aina kun näytön vähimmäiskoko '768px' tai suurempi täyttyy, sovelletaan seuraavaa CSS:ää:
@media ( min-leveys : 768 pikseliä ) {kehon {
Fonttikoko : 14px ;
}
otsikko {
pehmuste : 18px ;
}
nav ul {
näyttö : flex ;
}
heidän aluksensa {
marginaali : 0 8px ;
}
pää {
näyttö : flex ;
perustele-sisältö : välilyönti ;
kohdista-kohteet : keskusta ;
}
alatunniste {
pehmuste : 18px ;
}
}
Alla oleva tulos osoitti, että muotoilu on herkkä myös suuremmilla näytöillä:
Johtopäätös
Luo ensin HTML-rakenne ja lisää näkymä, jotta voit määrittää mobiililaitteille sopivan responsiivisen suunnittelun. Tämän jälkeen linkitä CSS-tiedosto head-tunnisteeseen. Käytä sitten CSS:ää, joka perustuu mobiililähtöiseen suunnitteluun. Lisäksi käyttäjät voivat lisätä CSS-mediakyselyn säädettäväksi mobiililaitteella. Tämä kirjoitus on osoittanut yksityiskohtaisen menettelyn mobiililähtöisen suunnittelun luomiseksi.