Kitas veiksnys, skatinantis sutelkti dėmesį į mobiliesiems pritaikytą dizainą, yra tai, kad dauguma žmonių prisijungia prie interneto per savo mobiliuosius įrenginius, o tai sudaro 60 proc. Nors tik 20% žmonių naudojasi internetu staliniuose kompiuteriuose.
Šiame straipsnyje bus pateiktos instrukcijos, kaip sukurti mobiliesiems pritaikytą dizainą.
Kaip nustatyti mobiliesiems pritaikytą dizainą?
Interaktyvus dizainas, nesvarbu, ar jis reaguoja į mobilųjį telefoną, ar didesniems ekranams, gali būti sukurtas šiais būdais:
- Sukurkite mobiliesiems pritaikytą dizainą.
- Naudokite / naudokite medijos užklausą, kad sukurtumėte / sukurtumėte reaguojantį dizainą didesniems ekranams.
1 būdas: sukurkite mobiliesiems pritaikytą dizainą
Pirmiausia pradėkite nuo mobiliesiems skirto dizaino metodo kūrimo. Tuo tikslu vykdykite toliau pateiktas nuoseklias instrukcijas.
1 veiksmas: sukurkite HTML struktūrą
Pirmiausia sukurkite HTML struktūrą ir pridėkite „ Bootstrap ' viduje
< ul >
< kad >< a href = '#' > Namai < / a >< / kad >
< kad >< a href = '#' > Apie mus < / a >< / kad >
< kad >< a href = '#' > Mūsų Paslaugos < / a >< / kad >
< kad >< a href = '#' > Susisiekite su mumis < / a >< / kad >
< / ul >
< / ne>
< / antraštė>
< h1 > Sveiki atvykę į „Linux Hint“. < / h1 >
< p > Pamokų svetainė. < / p >
< / skyrius>
< / pagrindinis>
< p > Linux patarimas Autorių teisės < / p >
< / poraštė>
< / kūnas >
2 veiksmas: taikykite CSS
Kūno skiltyje nustatykite „ šrifto šeima 'į' be serifo “. Taip pat nustatykite užpildymą, paraštę ir fono spalvą. Po to antraštėje, poraštėje ir naršymui pritaikykite CSS:
kūnas {šrifto šeima : be serifo ;
marža : 0 ;
kamšalas : 0 ;
fono spalva : #808080 ;
}
antraštę {
fono spalva : violetinė ;
spalva : baltas ;
kamšalas : 8px ;
}
nav ul {
sąrašo stiliaus : nė vienas ;
kamšalas : 0 ;
marža : 0 ;
}
jų laivas {
marža : 4 piks 0 ;
}
nav ul li a {
spalva : baltas ;
tekstas-dekoravimas : nė vienas ;
}
pagrindinis {
kamšalas : 18 pikselių ;
}
poraštė {
fono spalva : rožinis ;
spalva : baltas ;
teksto lygiavimas : centras ;
kamšalas : 8px ;
}
Kaip galima pastebėti, toliau pateikta produkcija patvirtino, kad dizainas pirmiausia reaguoja į mobilųjį telefoną:
2 būdas: naudokite medijos užklausas, kad sukurtumėte interaktyvų dizainą didesniems ekranams
Aukščiau pateiktą dizainą taip pat galima sukurti didesniems ekranams, tokiems kaip planšetiniai kompiuteriai ir staliniai kompiuteriai. Tuo tikslu vartotojai turi įtraukti medijos užklausą į CSS. Planšetinių kompiuterių plotis yra „ 786 pikseliai “, o staliniams kompiuteriams yra „ 1024 pikseliai “.
Norėdami pritaikyti medijos užklausas, pirmiausia įtraukite „ @media “ žymą CSS faile. Po to nurodykite ypatybę „min-width“ kaip „ 768 pikseliai “. Tai reiškia, kad kai pasiekiamas minimalus ekrano dydis „768 pikseliai“ arba didesnis, bus taikomas šis CSS:
@media ( min pločio : 768 pikseliai ) {kūnas {
šrifto dydis : 14 pikselių ;
}
antraštę {
kamšalas : 18 pikselių ;
}
nav ul {
ekranas : lankstus ;
}
jų laivas {
marža : 0 8px ;
}
pagrindinis {
ekranas : lankstus ;
pateisinti-turinys : tarpas-tarp ;
išlyginti elementus : centras ;
}
poraštė {
kamšalas : 18 pikselių ;
}
}
Toliau pateikta produkcija parodė, kad dizainas taip pat reaguoja į didesnius ekranus:
Išvada
Norėdami nustatyti mobiliesiems pritaikytą dizainą, pirmiausia sukurkite HTML struktūrą ir pridėkite peržiūros sritį. Po to susiekite CSS failą galvos žymoje. Tada pritaikykite CSS, pagrįstą mobiliuoju telefonu. Be to, vartotojai gali pridėti CSS medijos užklausą, kad ją pritaikytų mobiliajame įrenginyje. Šiame įraše parodyta išsami procedūra, skirta sukurti pirmiausia mobiliesiems reaguojantį dizainą.