Sintaks kanggo pitakon media min-lebar lan paling dhuwur
Desain web responsif minangka pendekatan kanggo mbangun kaca-kaca ing ngendi kaca-kaca kasebut kanthi cepet bisa ngganti tata letak lan tampilan sing adhedhasar ukuran layar pengunjung . Layar gedhe bisa nampa tata letak sing cocog karo layar sing luwih gedhe nalika piranti cilik, kaya ponsel, bisa nampa situs web sing padha kanthi cara sing cocok kanggo layar sing luwih cilik. Pendekatan iki nyedhiyakake pengalaman panganggo sing luwih apik kanggo kabeh pangguna lan bisa malah nambah peringkat peringkat mesin panelusur . Sisih penting saka desain web responsif yaiku CSS Media Queries.
Media Queries kaya kaya-kaya ing statement sing ana ing file CSS situs web, ngidini sampeyan nyetel aturan CSS tartamtu sing mung bakal kena pengaruh nalika kondisi tartamtu ditemtokake - kaya nalika ukuran layar ing ndhuwur utawa ngisor batesan tartamtu.
Media Queries in Action
Dadi carane sampeyan nggunakake Queries Media ing situs web? Punika conto ingkang prasaja:
- Sampeyan bakal miwiti nganggo dokumen HTML sing wis kabentuk kanthi bebas saka gaya visual (yaiku apa sing dienggo CSS)
- Ing file CSS sampeyan, sampeyan bakal miwiti kanthi normal kanthi nggandhengake kaca lan nyetel baseline kanggo situs web. Ngomong yen sampeyan pengin ukuran font kaca dadi 16 piksel, sampeyan bisa nulis CSS iki: body {font-size: 16px; }
- Saiki, sampeyan pengin nambah ukuran font kanggo layar sing luwih gedhe sing nduweni real estate akeh. Iki ngendi Media Queries kick in. Sampeyan bakal miwiti Query Media kaya iki: @media layar lan (min-width: 1000px) {}
- Iki minangka sintaks saka Query Media. Diawali karo @media kanggo netepake Query Media dhewe. Sabanjure sampeyan nyetel "jinis media", sing ing kasus iki "layar". Iki ditrapake kanggo desktop komputer desktop, tablet, telpon, etc. Akhirnya, sampeyan ngakhiri Query Media kanthi "fitur media". Ing conto liyane ing ndhuwur, yaiku "mid-width: 1000px". Iki tegese Query Media bakal nyepak kanggo layar kanthi jembar minimal 1000 piksel.
- Sawise elemen-elemen saka Query Media, sampeyan nambah bukaan mbukak lan nutup keriting padha karo apa sing bakal sampeyan tindakake ing sembarang aturan CSS normal.
- Langkah pungkasan kanggo Query Media kanggo nambah aturan CSS sing pengin sampeyan pas nalika kondisi kasebut ketemu. Sampeyan nambah aturan CSS kasebut ing antarane penyepuh kriting sing arupi Query Media, kaya iki: @media Layar lan (min-width: 1000px) {body {font-size: 20px; }
- Nalika kondisi Query Media ketemu (jendhela browser paling sethithik 1000 piksel), gaya CSS iki bakal ditrapake, ngganti ukuran font situs kita saka 16 piksel sing kita wiwiti asale saka nilai anyar 20 piksel.
Nambah Gaya Liyane
Sampeyan bisa nyelehake akeh aturan CSS ing Query Media iki minangka perlu kanggo nyetel tampilan visual situs web. Misale, yen sampeyan pengin ora mung nambah ukuran huruf nganti 20 piksel, nanging uga ngganti werna kabeh paragraf dadi ireng (# 000000), sampeyan bisa nambah iki:
@media screen and (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Nambahake Query Liyane Media
Tambahan, sampeyan bisa nambah Media Queries liyane kanggo saben ukuran sing luwih gedhe, nambah menyang lembar gaya kaya iki:
@media screen and (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media screen and (min-width: 1400px) {body {font-size: 24px; }}Queries Media pisanan bakal nyepak ing 1000 piksel wide, ngganti ukuran font dadi 20 piksel. Banjur, nalika browser luwih saka 1400 piksel, ukuran font bakal ganti maneh nganti 24 piksel. Sampeyan bisa nambah minangka akeh Queries Media minangka needed kanggo situs web tartamtu.
Min-Width lan Max-Width
Umumé ana rong cara kanggo nulis Query Media - kanthi nggunakake "min-width" utawa kanthi "max-width". Supaya adoh, kita wis weruh "min-width" ing tumindak. Iki nyebabake Queries Media bisa ditindakake sawisé browser wis ngancik paling ora sing jembar minimal. Dadi pitakonan sing migunakake "min-width: 1000px" bakal ditrapake nalika browser paling sethithik 1000 piksel. Gaya Media Query digunakake nalika sampeyan mbangun situs kanthi cara "mobile-first".
Yen sampeyan nggunakake "max-width", kerjane kanthi cara ngelawan. A Query Media saka "maksimal: jembar: 1000px" bakal ditrapake sawisé browser wis tiba ing ngisor ukuran iki.
Regarding Browser lawas
Salah sijine tantangan karo Media Queries yaiku lack of support ing versi lawas ing Internet Explorer. Kanthi matur suwun , ana polyfills sing kasedhiya bisa nambal support kanggo Query Media ing browser sing lawas, supaya sampeyan bisa nggunakake situs kasebut ing dina iki nalika isih ngupaya tampilan situs kasebut ora katon ing piranti lunak browser lawas.
Diedit dening Jeremy Girard ing 1/24/17