De syntaksis foar sawol min-breed- en max-breed media queries
Responsive web design is in oanpak om webpages te bouwen wêr't dizze siden harren layout en ferskynsel dynamysk feroarje kinne basearre op in skermgrutte fan de besiker . Grutte skermen kinne in layout ûntfange foar de gruttere displays, wylst lytsere apparaten, lykas mobile tillefoans, deselde webside ynformearje kinne op in manier dy't passend is foar dat lytsere skerm. Dizze oanpak soarget foar in better brûkersûnderfining foar alle brûkers en it kin sels de sykombinaasjeregeling ferbetterje . In wichtich part fan respektyf webûntwerp is CSS Media Queries.
Media Queries binne lykwols as lytse bedoelde ynstellingen yn jo CSS-triem fan jo webside, sadat jo in bepaalde CSS-regels ynstelle kinne, dy't allinne effekt ha sille ien kear in bepaalde betingst sitte - as wannear't in skermgrutte boppe of ûnder guon thresholds is.
Media Queries yn aksje
Sa hoege jo hoe't jo mediafraach op in webside brûke? Hjir is in ienfâldige foarbyld:
- Jo moatte begjinne mei in goed strukturearre HTML dokumint fan alle soarten stilen (dit is wat CSS foar is)
- Yn jo CSS-bestân kinne jo begjinne as jo normaal dwaan troch it styl te meitsjen en in baseline te setten foar hoe't de webside besjen sil. Sizje jo dat de lettertypegrutte fan 'e side 16 pixels wêze soe, jo kinne dit CSS skriuwe: body {font-size: 16px; }
- No kinne jo dizze fontgrutte fergrutsje foar gruttere skermen dy't genôch realisme hawwe om dat te dwaan. Dit is wêr't Media Queries ynskeakelje. Jo moatte in Media Query opnij begjinne: @media skerm en (min-breed: 1000px) {}
- Dit is de syntaksis fan in Media Query. It begjint mei @media om de Media Query sels te fêstigjen. Jo sette dan de "media type", dy't yn dit gefal "skerm" is. Dit jildt foar buroblêd skermen, tablets, tillefoans, ensfh. Oan 'e ein, ferwiderje jo de Media Query mei de "media feature". Yn ús foarbyld hjirboppe is dat "middenbreedte: 1000px". Dit betsjut dat de Media Query yntrodusearret foar displays mei in minimum breedte fan 1000 pixels breed.
- Nei dizze eleminten fan 'e Media Query, adden jo in iepenje en sluten bûgde plaat te ferlykjen mei wat jo dwaan wolle yn elke normale CSS-regel.
- De einigste stap nei in Media Query is it CSS-regels te foegjen dat jo ien kear oanfreegje wolle dat dizze betingsten foldien is. Jo addieren dizze CSS-regels tusken de heulendelige spoaren dy't de Media Query meitsje, sa as dit: @media-skerm en (min-breed: 1000px) {body {font-size: 20px; }
- As de betingsten fan 'e Media Query foldien binne (it finster fan' e blêder is op syn minst 1000 piksels breed) sil dizze CSS-styl effektyf wizigje, de wiziging fan ús webside feroaret fan 'e 16 piksels dy't wy oarspronklik fêstige hawwe oan ús nije wearde fan 20 piksels.
Stel mear stilen
Jo kinne safolle CSS-regels yn dizze Media Query sette as nedich om jo optreden fan jo webside oan te passen. As jo bygelyks net allinich de lettertype-grutte oant 20 piksels ferwachtsje, mar ek de kleur fan alle paragrafen nei swart (# 000000) feroarje, jo kinne dit taheakje:
@media skerm en (min-breed: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Meitsje mear Media Queries
Dêrneist kinne jo mear Query's oanfreegje foar elke gruttere siden, sadat se oan jo stylblêd oanmeitsje:
@media skerm en (min-breed: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media skerm en (min-breed: 1400px) {body {font-size: 24px; }}De earste Media Queries soe yn 1000 pixels breed meitsje, wizigje de lettertypegrutte oant 20 piksels. Doe't de browser dan boppe 1400 piksels wie, soe de lettertypegrutte wer wernei op 24 piksels. Jo kinne sa folle Media Queries as jo nedich hawwe foar jo bepaalde webside.
Min-breed en Max-breedte
Der binne algemien twa manieren om Media Queries te skriuwen - mei "min-breedte" of mei "max-breed" te brûken. Boppedat hawwe wy "min-breed" yn aksje sjoen. Dit soarget dat de Media Queries effekt hat as ien browser in minimum fan dy minimum breedte berikt is. Sa is in query dy't "min-breedte: 1000px" brûkt sil as de blêder minimaal 1000 pixels breed is. Dizze styl fan Media Query wurdt brûkt as jo in side yn in "mobile-earste" manier bouwe.
As jo "max-width" brûke, wurket it op 'e oare kant. In Media Query fan "max-width: 1000px" soe tapast wurde as ien kear de browser ûnder dizze grutte falt.
Oardere Browsers
Ien útdaging mei Media Queries is har ûntbrekken fan stipe yn âldere ferzjes op Internet Explorer. Gelokkich binne der ferskillende foltôgers beskikber dat kinne stipe wurde foar Media Queries yn dy âldere browsers, wêrtroch jo se brûke op websides hjoed, wylst jo derfoar soargje dat it werjaan fan dizze side net brutsen yn âldere browser softwarest.
Edited by Jeremy Girard on 1/24/17