Lub syntax rau min-dav thiab max-dav media queries
Kev tsim kho lub web site yog ib qho kev ua kom tsim cov nplooj ntawv webpages uas cov nplooj ntawv muaj peev xwm hloov lawv txoj kev teeb tsa thiab tsos raws li tus neeg saib xyuas kev tshuaj ntsuam . Loj cov ntxaij vab tshaus tau txais ib qhov kev npaj tsim rau cov neeg loj dua thaum cov khoom siv me me, xws li cov xov tooj ntawm tes, tuaj yeem txais tib lub web site zoo li qhov tsim nyog rau qhov kev ntsuam xyuas me me. Qhov kev qhia no muab ib qho zoo dua rau cov neeg siv rau txhua tus neeg siv thiab nws tuaj yeem pab txhim kho tshawb nrhiav cav . Ib feem tseem ceeb ntawm kev tsim web tsim yog CSS Media Queries.
Media Queries yog zoo li cov nqe lus me me hauv koj lub vev xaib CSS, tso cai rau koj tso qee qhov CSS cov cai uas tsuas yog siv thaum muaj qee qhov mob - zoo li thaum twg tus npo loj tshaj los yog qis dua qis dua.
Media Queries hauv kev nqis tes ua
Yog li cas koj yuav siv Media Queries ntawm lub website? Ntawm no yog ib qho piv txwv yooj yim heev:
- Koj yuav pib nrog ib tus ntawv HTML zoo uas muaj cov ntaub ntawv pom zoo (uas yog dab tsi CSS)
- Nyob rau hauv koj cov ntaub ntawv CSS, koj yuav pib thaum koj nquag ua los ntawm styling cov nplooj ntawv thiab teem ib lub hauv paus rau lub website yuav saib zoo li cas. Hais tias koj xav tau qhov loj me ntawm daim nplooj ntawv yuav 16 pixels, koj tuaj yeem sau qhov CSS: lub cev {font-size: 16px; }
- Tam sim no, tej zaum koj yuav xav nce qhov loj me me rau cov vijtsam loj uas muaj lub meejmom av ua li ntawd. Qhov no yog qhov twg Media Queries ncaws tawm rau hauv. Koj yuav pib muaj lus nug zoo li no: @media screen thiab (min-width: 1000px) {}
- Qhov no yog lub syntax ntawm ib qho kev nug xov xwm. Nws pib nrog @media los tsim cov Media Query nws tus kheej. Tom qab koj teem caij "hom xov xwm", uas nyob rau hauv cov ntaub ntawv no yog "npo". Qhov no siv rau cov duab screens hauv computer, ntsiav tshuaj, xov tooj, thiab lwm yam. Thaum kawg, koj xaus cov lus nug nrog cov "media feature". Hauv peb tus qauv saum toj no, uas yog "nruab nrab-dav: 1000px". Qhov no txhais tau hais tias Cov Lus Hais Dhau yuav ncaws rau hauv cov lus qhia nrog qhov tsawg kawg nkaus ntawm 1000 tawm pixels dav.
- Tom qab cov ntsiab lus ntawm cov lus nug, koj ntxiv ib qho qhib thiab kaw curly brace zoo li koj yuav ua li cas hauv ib qho kev cai CSS.
- Kauj ruam kawg rau ib qho kev nug xov xwm yog ntxiv rau CSS cov cai uas koj xav thov kom tau raws li qhov teeb meem no tau ntsib. Koj ntxiv cov CSS cov cai ntawm cov khauj khaus uas ua cov Media Query, xws li qhov no: @media screen thiab (min-width: 1000px) {lub cev {font-size: 20px; }
- Thaum cov lus nug ntawm Media Query yog tau ntsib (qhov rais qhov rai yog qhov tsawg kawg yog 1000 pixels dav), qhov CSS style no yuav siv, hloov peb qhov chaw font loj los ntawm 16 pixels peb tsim thawj coj rau peb tus nqi tshiab ntawm 20 pixels.
Ntxiv ntau hom
Koj tuaj yeem tso tau ntau yam CSS cov cai hauv qhov Kev Tshaj Tawm Media no yog xav tau los kho koj lub website qhov muag pom. Piv txwv li, yog tias koj xav tsis tsuas nce lub font-me mus rau 20 pixels, tab sis kuj hloov xim ntawm tag nrho cov paragraphs dub (# 000000), koj yuav ntxiv qhov no:
@media npo thiab (min-dav: 1000px) {lub cev {font-size: 20px; } p {xim: # 000000; }}Muab cov ntawv xov xwm ntxiv
Tsis tas li ntawd, koj tuaj yeem ntxiv ntau cov lus nug rau txhua qhov loj me, ntxiv rau koj daim ntawv zoo li no:
@media npo thiab (min-dav: 1000px) {lub cev {font-size: 20px; } p {xim: # 000000; {} @media npo thiab (min-dav: 1400px) {lub cev {font-size: 24px; }}Tus thawj Media Queries yuav ncaws tawm thaum 1000 pixels dav, hloov qhov font loj mus rau 20 pixels. Tom qab ntawd, ib zaug qhov browser tau siab tshaj 1400 pixels, qhov luaj li cas font yuav hloov dua mus rau 24 pixels. Koj tuaj yeem tau ntxiv cov ntawv xov xwm ntau ntxiv raws li xav tau rau koj lub vev xaib.
Min-Width thiab Max-Width
Nws muaj ob txoj kev los sau ntawv Media Queries - los ntawm kev siv "min-width" los yog "max-width". Li ntawd, nyob deb, peb tau pom "min-dav" hauv kev nqis tes ua. Qhov no ua rau Media Queries siv cov nyhuv thaum ib qhov browser tau mus txog qhov tsawg kawg dav. Yog li cov lus nug uas siv "min-width: 1000px" yuav siv thaum tus browser tsawg kawg yog 1000 tawm pixels. Txoj kev xav ntawm Media Query no yog siv thaum koj tsim ib qhov chaw hauv ib qho "mobile-first".
Yog tias koj siv "max-dav", nws ua haujlwm hauv qhov txawv. Ib qho lus nug ntawm "max-width: 1000px" yuav siv thaum lub browser tau poob qis dua qhov no.
Hais txog cov Browser Laus
Ib qho kev sib tw nrog Media Queries yog lawv tsis muaj kev txhawb rau cov laus hauv Internet Explorer. Thankfully, muaj polyfills muaj kev pab txhawb nqa cov lus nug hauv cov laus dua browsers, uas koj siv rau hauv cov websites hnub no thaum uas tseem kom ntseeg tau tias cov ntaub ntawv ntawm qhov chaw ntawd tsis zoo nyob rau hauv qhov browser software laus.
Edited by Jeremy Girard rau 1/24/17