Hoe skryf jy CSS-media navrae?

Die sintaksis vir beide minwydte en maksimum wydte media navrae

Responsiewe webontwerp is 'n benadering tot die bou van webblaaie waar hierdie bladsye hul uitleg en voorkoms op 'n skerm verander . Groot skerms kan 'n uitleg kry wat geskik is vir die groter skerms, terwyl kleiner toestelle, soos selfone, dieselfde webwerf kan ontvang wat geformateer is op 'n manier wat geskik is vir die kleiner skerm. Hierdie benadering bied 'n beter gebruikers ervaring vir alle gebruikers en dit kan selfs help om soekenjins te verbeter . 'N belangrike deel van die reageer web ontwerp is CSS Media Queries.

Media-navrae is soos klein voorwaardelike stellings in die CSS-lêer van u webwerf, sodat u sekere CSS-reëls kan stel wat slegs sal raak wanneer 'n sekere voorwaarde nagekom is - soos wanneer 'n skermgrootte bo of onder sekere drempels is.

Media navrae in aksie

So, hoe gebruik jy Media Navrae op 'n webwerf? Hier is 'n baie eenvoudige voorbeeld:

1. Jy sal begin met 'n goed gestruktureerde HTML-dokument, vry van enige visuele style (dit is waarvoor CSS is)
2. In u CSS-lêer sal u begin soos u normaalweg doen deur die bladsy te styl en 'n basislyn te stel vir hoe die webwerf sal lyk. Sê jy wou die fontgrootte van die bladsy 16 pixels wees, jy kan hierdie CSS skryf: liggaam {font-size: 16px; }
3. Nou kan jy die lettergrootte verhoog vir groter skerms wat oorvloedige vaste eiendom het om dit te doen. Dit is waar MediaWiki-navrae inskakel. Jy sal 'n mediasoekery soos hierdie begin: @media skerm en (minwydte: 1000px) {}
4. Dit is die sintaksis van 'n media navraag. Dit begin met @media om die Media-navraag self te vestig. Vervolgens stel u die "media tipe" in, wat in hierdie geval "skerm" is. Dit geld vir rekenaarskermskerms, tablette, fone, ens. Ten slotte eindig jy die Media-navraag met die "media-funksie". In ons voorbeeld hierbo is dit "middelbreedte: 1000px". Dit beteken dat die media navraag sal skop vir uitstallings met 'n minimum breedte van 1000 pixels breed.

1. Na hierdie elemente van die Media-navraag voeg jy 'n opening- en sluitkrulhakie toe wat soortgelyk is aan wat jy in enige normale CSS-reël sou doen.
2. Die finale stap na 'n mediasaak is om die CSS-reëls by te voeg wat u wil aansoek doen sodra hierdie voorwaarde nagekom is. U voeg hierdie CSS-reëls toe tussen die krullerhakies wat die Media-navraag uitmaak, soos hierdie: @media skerm en (minwydte: 1000px) {liggaam {font-grootte: 20px; }
3. Wanneer die voorwaardes van die Media-navraag voldoen word (die blaaier venster is ten minste 1000 pixels breed), sal hierdie CSS-styl in werking tree, en ons webwerf se fontgrootte verander vanaf die 16 pixels wat ons oorspronklik gevestig het op ons nuwe waarde van 20 pixels.

Voeg meer style by

U kan soveel CSS-reëls in hierdie mediasoeke plaas as wat nodig is om u webwerf se visuele voorkoms aan te pas. As jy byvoorbeeld nie net die fontgrootte wil verhoog tot 20 pixels nie, maar ook die kleur van al die paragrawe na swart verander (# 000000), kan jy dit byvoeg:

@media skerm en (min-breedte: 1000px) {body {font-size: 20px; } p (kleur: # 000000; }}

Voeg meer media navrae by

Daarbenewens kan u meer Media-navrae vir elke groter grootte byvoeg, en voeg dit soos volg by u stylvel:

@media skerm en (min-breedte: 1000px) {body {font-size: 20px; } p (kleur: # 000000; {} @media skerm en (min-breedte: 1400px) {body {font-size: 24px; }}

Die eerste media navrae sal op 1000 pixels wyd geskuif word, en die skrifgrootte verander na 20 pixels. Dan, sodra die blaaier meer as 1400 pixels was, sou die lettergrootte weer verander na 24 pixels. Jy kan soveel Media-navrae soos benodig vir jou spesifieke webwerf byvoeg.

Min breedte en maksimum breedte

Daar is oor die algemeen twee maniere om Media-navrae te skryf - deur "min-breedte" of "maksimum wydte" te gebruik. Tot dusver het ons "minwydte" in aksie gesien. Dit veroorsaak dat die media navrae in werking tree sodra 'n blaaier ten minste die minimum breedte bereik het. So 'n navraag wat "minwydte: 1000px" gebruik, sal van toepassing wees as die blaaier minstens 1000 pixels breed is. Hierdie styl van Media Query word gebruik wanneer u 'n webwerf op 'n "mobiele eerste" manier bou.

As jy "maksimum wydte" gebruik, werk dit op die teenoorgestelde manier. 'N Mediavraag van "maksimum wydte: 1000px" sal van toepassing wees sodra die blaaier onder hierdie grootte geval het.

Wat ouer blaaiers betref

Een uitdaging met Media Queries is hul gebrek aan ondersteuning in ouer weergawes op Internet Explorer. Gelukkig is daar polyfills beskikbaar wat die ondersteuning vir Media-navrae in die ouer blaaiers kan laai. U kan dit op webtuistes gebruik, terwyl u steeds seker maak dat die vertoning van die werf nie in ouer blaaierprogrammatuur gebreek word nie.

Geredigeer deur Jeremy Girard op 1/24/17