Bawo ni O Ṣe Kọ Awọn Iwadi Iwadi CSS?

Awọn iṣawari fun awọn min-iwọn ati awọn ibeere wiwa-pupọ-iwọn

Idahun oniru wẹẹbu jẹ ọna ti o niiṣe lati kọ oju-iwe wẹẹbu ni ibiti awọn oju-iwe yii ṣe le yi iyipada ati irisi wọn daadaa ti o da lori iwọn iboju alejo . Awọn iboju nla le gba ifilelẹ kan ti o yẹ fun awọn ifihan ti o tobi ju awọn ẹrọ kekere, bi awọn foonu alagbeka, le gba aaye ayelujara kanna ti a pa akoonu ni ọna ti o yẹ fun iboju kekere naa. Ilana yii n ṣe iriri iriri ti o dara julọ fun gbogbo awọn olumulo ati pe o le ṣe iranlọwọ lati mu awọn ipo iṣiro silẹ . Akopọ pataki kan ti nṣe ojuṣe oju-iwe ayelujara jẹ CSS Media Queries.

Awọn ibeere Iwadi jẹ bi awọn gbolohun ọrọ diẹ ninu faili CSS ti aaye ayelujara rẹ, ti o fun ọ laaye lati ṣeto awọn ofin CSS kan ti yoo gba ipa lẹhin ti awọn ipo kan ba pade - bi nigbati iwọn iboju kan wa ni oke tabi ni isalẹ awọn ibudo.

Awọn Iwadi Iwadi ni Ise

Nitorina bawo ni o ṣe nlo Awọn Iwadi Media lori aaye ayelujara kan? Eyi jẹ apẹẹrẹ ti o rọrun julọ:

1. Iwọ yoo bẹrẹ pẹlu iwe-aṣẹ HTML ti o dara daradara laisi eyikeyi awọn awoṣe ti a wo (ti o jẹ pe CSS jẹ fun)
2. Ninu faili CSS rẹ, iwọ yoo bẹrẹ bi o ṣe deede nipasẹ titẹ si oju-iwe ati ṣeto ipilẹṣẹ kan fun bi oju-aaye ayelujara yoo ti wo. Sọ pe o fẹ iwọn iwọn ti oju iwe naa lati jẹ 16 awọn piksẹli, o le kọ CSS yii: ara {font-size: 16px; }
3. Lọwọlọwọ, o le fẹ lati mu iwọn titobi naa fun awọn iboju tobi ti o ni awọn ohun-ini gidi lati ṣe bẹẹ. Eyi ni ibi ti Awọn igbadun Iwadi ti wọlé. Iwọ yoo bẹrẹ ìbéèrè Ibeere bi eleyi: iboju iboju ati (min-iwọn: 1000px) {}
4. Eyi ni apẹrẹ ti Ibeere Media kan. O bẹrẹ pẹlu aago lati fi idi Iwadi Iwadi naa mulẹ funrararẹ. Nigbamii ti o ṣeto "iru media", eyi ti o jẹ "iboju" ni ọran yii. Eyi ni ibamu si awọn iboju iboju kọmputa, awọn tabulẹti, awọn foonu, ati bẹbẹ lọ. Nikẹhin, o pari Media Query pẹlu "ẹya ara ẹrọ aladani". Ninu apẹẹrẹ wa loke, ti o jẹ "iwọn aarin-ẹgbẹ: 1000px". Eyi tumọ si pe Ibaraẹnisọrọ Iwadi yoo wọ inu fun awọn ifihan pẹlu iwọn ti o kere ju 1000 Pixels fife.

1. Lẹhin awọn nkan wọnyi ti Media Require, o fi ṣii ṣiṣi ati titiipa àmúró itẹsiwaju iru ohun ti iwọ yoo ṣe ninu ofin CSS deede.
2. Igbesẹ ikẹhin si Media Query ni lati fi awọn ofin CSS ṣe ti o fẹ lo kan lẹẹkan ti o ba mu iru ipo yii. O ṣe afikun awọn ofin CSS wọnyi laarin awọn igbasẹ iṣọ ti o ṣe agbejade Media, bi eleyi: iboju iboju ati (min-iwọn: 1000px) {ara {font-size: 20px; }
3. Nigbati awọn ipo ti Media Query ti pade (window window jẹ o kere 1000 pixels fife), CSS yii yoo mu ipa, yiyipada iwọn iwe ti aaye wa lati awọn 16 awọn piksẹli ti a ṣeto ni akọkọ si iye tuntun wa ti awọn piksẹli 20.

Fikun Awọn Ẹṣọ Diẹ sii

O le gbe ọpọlọpọ awọn ofin CSS laarin Ilana Media yi bi o ṣe nilo lati ṣatunṣe irisi oju-iwe ayelujara ti oju-iwe ayelujara rẹ. Fun apeere, ti o ba fẹ lati ko nikan mu iwọn-ipe si 20 awọn piksẹli, ṣugbọn tun yi awọ ti gbogbo awọn paragika si dudu (# 000000), o le fi eyi kun:

iboju aladani ati (min-iwọn: 1000px) {ara {font-size: 20px; } p {awọ: # 000000; }}

Fikun Awọn Iwadii Agbaye diẹ sii

Pẹlupẹlu, o le fi awọn ibeere Ibaraẹnisọrọ diẹ sii fun gbogbo titobi nla, fifi wọn kun iwe ara rẹ bi eyi:

iboju aladani ati (min-iwọn: 1000px) {ara {font-size: 20px; } p {awọ: # 000000; {} iboju iboju ati (min-iwọn: 1400px) {ara [fon-iwọn: 24px; }}

Awọn ibere ibeere akọkọ ti yoo ṣẹ ni 1000 awọn piksẹli jakejado, yiyipada iwọn fonti si 20 awọn piksẹli. Lẹhinna, ni kete ti ẹrọ lilọ kiri ayelujara ti ju awọn 1400 awọn piksẹli, iwọn iwọn yoo yipada lẹẹkansi si awọn piksẹli 24. O le ṣe afikun bi ọpọlọpọ Awọn Iwadi Media ti o nilo fun aaye ayelujara rẹ pato.

Iyọ-Min ati Max-Iwọn

Awọn ọna meji ni o wa ni kiakia lati kọ Awọn ibeere Media - nipa lilo "iwọn-pupọ" tabi pẹlu "iwọn ila-iwọn". Lọwọlọwọ, a ti ri "min-iwọn" ni iṣẹ. Eyi nfa ki Awọn Ibere ​​Agbaye ṣe ipa lakoko ti aṣàwákiri ti dé ni o kere ju iwọn igbọnwọ naa. Nitorina ibeere ti o nlo "min-iwọn: 1000px" yoo waye nigbati wiwa kiri jẹ o kere 1000 pixels fife. A ti lo iru aṣa ti Media Query nigba ti o ba n kọ aaye kan ni ọna "mobile-first".

Ti o ba lo "iwọn-pupọ", o ṣiṣẹ ni ọna idakeji. Ibeere Media kan ti "Max-width: 1000px" yoo waye ni kete ti aṣàwákiri ti ṣubu ni isalẹ iwọn yii.

Nipa Awọn burausa Agbalagba

Ipenija kan pẹlu awọn Iwadi Agbaye jẹ aiṣeduro wọn ni awọn ẹya agbalagba lori Internet Explorer. A dupẹ, awọn polyfills wa ti o le ṣe atilẹyin fun apadii fun Awọn Iwadii Media ni awọn aṣàwákiri agbalagba, n jẹ ki o lo wọn lori awọn aaye ayelujara loni lakoko ti o tun n ṣe idaniloju pe ifihan ti aaye yii ko ni ipalara ni software lilọ kiri agbalagba.

Edited by Jeremy Girard lori 1/24/17