The rumpaka keur queries duanana mnt-lebar tur max-lebar média
Desain web responsif mangrupa pendekatan ka gedong webpages mana maranéhanana Kaca dinamis bisa ngarobah tata perenah jeung penampilan maranéhanana dumasar kana ukuranana layar hiji nganjang urang . layar badag bisa narima perenah cocog kana pamadegan mintonkeun badag bari alat leutik, kawas ponsel, bisa nampa ramatloka sarua diformat di luhur yén anu cocog pikeun nu layar leutik. Pendekatan ieu nyadiakeun pangalaman pamaké hadé pikeun sakabéh pamaké sarta eta malah bisa ngabantu ningkatkeun rankings search engine . Bagian penting desain web responsif nyaeta CSS Media queries.
Queries Media anu kawas pernyataan kondisional saeutik jero file CSS ramatloka anjeun, sahingga anjeun diatur aturan CSS tangtu nu ngan baris nyandak mangaruhan sakali hiji kaayaan nu tangtu ieu patepung - kawas lamun ukuran layar anu luhur atawa handap thresholds tangtu.
Queries media dina Aksi
Jadi kumaha Anjeun maké Media queries on ramatloka a? Di dieu téh conto basajan pisan:
- Anjeun bakal mimitian ku dokumen HTML well-terstruktur bébas tina sagala gaya visual (anu mangrupa naon CSS kanggo)
- Dina file CSS, anjeun bakal ngamimitian anjeun ilaharna ngalakukeun ku styling kaca sarta netepkeun hiji dasar pikeun kumaha ramatloka bakal kasampak. Ucapkeun Anjeun miharep ukuran font kaca janten 16 piksel, Anjeun bisa nulis ieu CSS: awakna {font-ukuran: 16px; }
- Kiwari, anjeun bisa hayang ningkatkeun anu ukuranana font pikeun layar badag nu mibanda real estate ample pikeun ngalakukeunana. Ieu tempat Media queries tajongan di Anjeun bakal ngamimitian Media pamundut kawas ieu:. Layar @media na (mnt-lebar: 1000px) {}
- Ieu teh rumpaka tina hiji pamundut Media. Ieu dimimitian ku @media ngadegkeun pamundut Media sorangan. Salajengna Anjeun nyetel "jenis media", nu dina hal ieu nyaeta "layar". Ieu lumaku pikeun layar komputer desktop, tablet, telepon, jsb Tungtungna, anjeun mungkas Media pamundut jeung "fitur média". Dina conto urang luhur, éta téh "pertengahan lebar: 1000px". Ieu ngandung harti yén pamundut Media baris kick dina keur mintonkeun kalayan rubak minimum lega 1000 piksel.
- Saatos elemen ieu tina pamundut Media, Anjeun nambahkeun hiji lawang jeung nutup pananggeuy Curly sarupa naon anu anjeun ngalakukeun dina sagala aturan CSS normal.
- Hambalan ahir ka pamundut Media nyaéta pikeun nambahkeun aturan CSS nu Anjeun hoyong nerapkeun sakali kaayaan ieu patepung. Anjeun nambahkeun aturan CSS ieu antara braces Curly nu nyieun nepi Media pamundut, kawas kieu: @media layar tur (mnt-lebar: 1000px) {awakna {font-ukuran: 20px; }
- Lamun kaayaan pamundut Media anu patepung (jandéla browser is sahanteuna 1000 piksel lega), gaya CSS ieu bakal mawa pangaruh, ngarobah ukuran font situs urang urang ti 16 piksel kami ngadegkeun asalna mun nilai anyar kami 20 piksel.
Nambahkeun Styles More
Anjeun bisa nempatkeun saloba aturan CSS dina pamundut Media ieu diperlukeun pikeun ngaluyukeun pintonan visual ramatloka anjeun. Contona, upami anjeun hayang teu ukur nambahan font-ukuran nepi ka 20 piksel, tapi ogé robah warna kabeh ayat ka hideung (# 000000), Anjeun bisa nambahkeun ieu:
layar @media na (mnt-lebar: 1000px) {awakna {font-ukuran: 20px; } P {warna: # 000000; }}Nambahkeun More Media queries
Sajaba, Anjeun bisa nambah leuwih Media queries keur unggal ukuran badag, nambahan eta lambar gaya Anjeun kawas kieu:
layar @media na (mnt-lebar: 1000px) {awakna {font-ukuran: 20px; } P {warna: # 000000; {} Layar @media na (mnt-lebar: 1400px) {awakna {font-ukuran: 24px; }}Kahiji Media queries bakal kick di di lega 1000 piksel, ngarobah ukuran font nepi ka 20 piksel. Lajeng, sakali browser ieu luhureun 1400 piksel, ukuran font bakal ngarobah deui kana 24 piksel. Anjeun bisa nambahkeun saloba Media queries sakumaha diperlukeun pikeun ramatloka husus Anjeun.
Mnt-Width na Max-Width
Aya umum dua cara nulis Media queries - ku ngagunakeun "mnt-lebar" atanapi sareng "max-lebar". Sajauh, kami geus katempo "mnt-lebar" dina peta. Hal ieu ngabalukarkeun Media queries mawa pangaruh sakali browser tos ngahontal sahenteuna nu minimum lebar. Ku kituna hiji pamundut anu ngagunakeun "mnt-lebar: 1000px" baris nerapkeun nalika pangotektak sahanteuna 1000 piksel lega. gaya ieu Media pamundut anu dipaké nalika anjeun ngawangun situs dina "mobile-hareup" manner.
Lamun make "max-lebar", gawéna di ragam sabalikna. A Media pamundut ti "max-lebar: 1000px" bakal nerapkeun sakali browser geus fallen handap ukuran ieu.
Ngeunaan heubeul panyungsi
Hiji tantangan jeung Media queries nyaeta kurangna maranéhanana rojongan dina versi heubeul dina Internet Explorer. Thankfully, aya polyfills sadia nu bisa patch rojongan pikeun Media queries di maranéhanana panyungsi heubeul, sahingga anjeun ngagunakeun aranjeunna dina situs web dinten bari tetep mastikeun yén tampilan loka anu henteu kasampak pegat di software browser heubeul.
Diédit ku Jeremy Girard on 1/24/17