Kokį vaidmenį atlieka medijos užklausos, kad komandos nario išsamios informacijos puslapio dizainas būtų interaktyvus, ir ar galite pateikti pavyzdį, kaip jos naudojamos CSS?

/ / paskelbta Svetainių kūrimas, EITC/WD/WFCE žiniatinklio srauto TVS ir el. Prekyba, Svetainės kūrimas, Komandos puslapis: komandos narys išsamiai reaguoja į puslapį, Egzamino peržiūra

Žiniasklaidos užklausos yra esminis komponentas norint pasiekti interaktyvų dizainą, ypač komandos nario išsamios informacijos puslapyje. Jie leidžia kūrėjams pritaikyti konkrečius stilius pagal vartotojo įrenginio ypatybes, pvz., ekrano plotį, aukštį, orientaciją ir skiriamąją gebą. Tai užtikrina, kad tinklalapis būtų vizualiai patrauklus ir funkcionalus įvairiuose įrenginiuose – nuo ​​stalinių kompiuterių iki planšetinių kompiuterių iki išmaniųjų telefonų.

Reaktyvus dizainas yra svarbus vartotojo patirčiai, nes jis pritaiko išdėstymą prie žiūrėjimo aplinkos. Šis pritaikomumas pasiekiamas naudojant sklandų tinklelio išdėstymą, lanksčius vaizdus ir CSS medijos užklausas. Medijos užklausos leidžia taikyti skirtingas CSS taisykles, atsižvelgiant į sąlygas, kurias jos atitinka. Šios sąlygos apibrėžiamos naudojant medijos funkcijas, tokias kaip plotis, aukštis, formato santykis ir kt.

Komandos nario išsamios informacijos puslapyje medijos užklausos atlieka labai svarbų vaidmenį užtikrinant, kad turinys būtų pasiekiamas ir gerai sutvarkytas įvairiuose ekrano dydžiuose. Pavyzdžiui, darbalaukyje galbūt norėsite pateikti išsamų vaizdą su šonine juosta, dideliais vaizdais ir išsamiu tekstu. Tačiau mobiliajame įrenginyje išdėstymas turėtų būti supaprastintas, kad tilptų mažesniame ekrane, galbūt sudėjus elementus vertikaliai ir sumažinant vaizdo dydžius.

Čia pateikiamas išsamus paaiškinimas, kaip veikia medijos užklausos ir kaip jas galima įdiegti CSS:

Medijos užklausų sintaksė

Medijos užklausą sudaro medijos tipas ir viena ar daugiau išraiškų, kurios tikrina, ar nėra tam tikrų medijos funkcijų sąlygų. Pagrindinė sintaksė yra tokia:

css
@media media_type and (media_feature: value) {
    /* CSS rules */
}

– „Media_type“: nurodo įrenginio tipą (ekranas, spausdinimas ir kt.). Dažniausiai interaktyviam dizainui naudojamas medijos tipas yra „ekranas“.
– „media_feature“: nurodo tikrintiną funkciją (plotis, aukštis, orientacija ir kt.).
– „vertė“: vertė, su kuria reikia palyginti (pvz., 600 taškų).

Medijos užklausų pavyzdys CSS

Apsvarstykite komandos nario informacijos puslapį su šiais elementais:
- Profilio nuotrauka
– Vardas ir pareigos
- Biografija
- Kontaktinė informacija

Tikslas yra sukurti jautrų dizainą, kuris pritaikytų šiuos elementus skirtingiems ekrano dydžiams.

Numatytieji stiliai (didesniems ekranams)
{{EJS9}}
Medijos užklausa planšetiniams kompiuteriams (ekranai nuo 600 iki 900 piks.)



{{EJS10}}
Medijos užklausa mobiliesiems įrenginiams (ekranai iki 599 pikselių)



{{EJS11}}
Pavyzdžio paaiškinimas


- Numatytieji stiliaiŠie stiliai taikomi didesniems ekranams, pvz., staliniams ir nešiojamiesiems kompiuteriams. „Team-member“ klasė naudoja „flexbox“ išdėstymą su horizontalia kryptimi. Profilio nuotrauka yra gana didelė, o teksto dydžiai taip pat didesni, kad būtų galima išnaudoti turimą ekrano erdvę. Planšetinių kompiuterių stiliaiKai ekrano plotis yra nuo 600 iki 900 pikselių, išdėstymas pasikeičia į stulpelių kryptį, centruojant elementus. Profilio nuotraukos dydis sumažinamas, o paraštės pakoreguojamos, kad būtų išlaikyta subalansuota išvaizda. Šrifto dydžiai šiek tiek sumažinami, kad atitiktų mažesnį ekraną. - Mobilieji stiliai: ekranuose iki 599 pikselių išdėstymas išlieka stulpelio kryptimi, tačiau profilio nuotraukos ir teksto dydžiai dar labiau sumažinami. Paminkštinimas taip pat sumažintas, kad būtų galima geriau išnaudoti ribotą ekrano erdvę.

Geriausia medijos užklausų naudojimo praktika


1. Mobilusis pirmasis požiūrisPirmiausia pradėkite kurti dizainą mažiausiems ekranams, o tada naudokite medijos užklausas, kad pridėtumėte stilius didesniems ekranams. Toks metodas užtikrina, kad dizainas iš esmės būtų pritaikomas individualiems poreikiams. 2. Naudokite santykinius vienetusNaudokite santykinius vienetus, tokius kaip procentai, ems ir rems, o ne fiksuotus vienetus, tokius kaip pikseliai. Tai leidžia dizainui tapti lankstesniam ir pritaikomam prie skirtingų ekranų dydžių. 3. Bandymas tikruose įrenginiuoseVisada išbandykite savo pritaikomąjį dizainą tikruose įrenginiuose, kad įsitikintumėte, jog jis veikia taip, kaip tikėtasi. Emuliatoriai ir naršyklės įrankiai yra naudingi, tačiau tikri įrenginiai pateikia tiksliausius rezultatus. 4. Optimizuoti vaizdusNaudokite interaktyvius vaizdus, ​​kurie prisitaiko prie skirtingų ekranų dydžių. Tokie metodai kaip „srcset“ ir „sizes“ atributai elemente „ Žymė „`“ gali padėti pateikti įrenginiui tinkamą vaizdo dydį. 5. Apsvarstykite našumą: Venkite įkelti nereikalingų išteklių mažesniems ekranams. Naudokite sąlyginio įkėlimo metodus, kad pagerintumėte našumą mobiliuosiuose įrenginiuose.

Išplėstinės medijos užklausos funkcijos


1. orientacija: galite naudoti medijos funkciją „orientacija“, kad pritaikytumėte stilius pagal įrenginio orientaciją (stačias arba gulsčias).


css
@media screen and (orientation: landscape) {
    .team-member {
        flex-direction: row;
    }
}

2. Aspect Ratio: medijos funkcija „kraštinių santykis“ leidžia taikyti stilius pagal įrenginio pločio ir aukščio santykį.
css
@media screen and (min-aspect-ratio: 16/9) {
    .profile-picture {
        width: 250px;
        height: 250px;
    }
}

3. rezoliucija: „Skiros“ medijos funkcija gali būti naudojama nukreipti į įrenginius, kurių ekrano skiriamoji geba.
css
@media screen and (min-resolution: 2dppx) {
    .profile-picture {
        border: 2px solid #000;
    }
}

4. Medijos užklausų derinimas: galite sujungti kelias medijos užklausas naudodami loginius operatorius, pvz., „ir“, „arba“ ir „ne“.
css
@media screen and (max-width: 600px), screen and (orientation: portrait) {
    .team-member {
        flex-direction: column;
    }
}

Žiniasklaidos užklausos yra nepakeičiamos priemonės kuriant interaktyvų dizainą. Jie leidžia kūrėjams pritaikyti tinklalapio išdėstymą ir stilių skirtingiems įrenginiams, užtikrinant sklandžią vartotojo patirtį. Suprasdami ir efektyviai naudodami medijos užklausas, galite sukurti komandos nario išsamios informacijos puslapį, kuris puikiai atrodytų ir gerai veiktų bet kuriame įrenginyje.
Kiti naujausi klausimai ir atsakymai apie EITC/WD/WFCE žiniatinklio srauto TVS ir el. Prekyba:
Peržiūrėkite daugiau klausimų ir atsakymų EITC/WD/WFCE Webflow TVS ir el. komercijoje
Daugiau klausimų ir atsakymų:
Tagged pagal: , , , ,