Pārlūkprogrammas izmēru noteikšana, izmantojot CSS3

Kad mēs sākam pilnīgi pasaulē atsaucīgs dizains ir svarīgi zināt, kādi ir jaunie noteikumi CSS3, tas palīdz mums noteikt ekrāna izmērus, kurā tiek skatīta vietne vai lietojumprogramma.
Viens no šiem noteikumiem ir @puse, kas ar atbilstošu nosacījumu kombināciju ļauj mums zināt ekrāna izmēru kā tādu un atkarībā no rezultāta veikt atbilstošas ​​darbības attiecībā uz tā dizainu.

Izmantojot multivides vaicājumus

Izveidosim kodu HTML vienkāršs, un tur mēs iekļausim mūsu stila lapu, kurā būs mūsu noteikumi nozīmē gribēt, paskatīsimies:

 Noteikt ekrāna izmērus 

Kā redzam, tas ir diezgan vienkāršs kods, tomēr ir jāizceļ vairākas lietas. Pirmais ir pievienots etiķetēm stils, tur mums ir divi noteikumi, pirmais norāda, ka no 600 pikseļi mūsu teksta fona krāsa uz etiķetes h1 Tas mainīsies uz zilu, redzēsim, kad mainīsim lielumu pārlūkprogrammā un šīs izmaiņas stāsies spēkā:

Otrais noteikums norāda, ka, ja maksimālais platums ir 400 pikseļi teksta fona krāsa mainīsies uz sarkanu, kas norāda uz trešo nosacījumu, jo viss, kas mazāks par 400 pikseļiem, būs sarkans un virs 600 - zils, tāpēc no 401 līdz 599 pikseļiem tā noklusējuma balto krāsu saglabās, redzēsim:

Visbeidzot, ja mēs ievērojami samazināsim pārlūkprogrammas ekrānu, mēs ievadīsim mūsu sarkanās fona krāsas noteikumu, redzēsim, kā tā izskatās:

Tad mēs redzam, ka mūsu pārlūkprogrammas izmēru noteikšana ir ārkārtīgi vienkāršs uzdevums CSS3, kas ir ārkārtīgi noderīgi, strādājot ar atsaucīgiem dizainparaugiem, un mums ir jāzina lietotāja pārlūkprogrammas izmēri, lai piemērotu stilus, kas padara mūsu vietni par labu jebkurai ierīcei un esošo ekrāna izšķirtspēju.