Css - interogări media (interogări media), șeful IT

Ce este interogări media?

interogări media (interogări media) - aceasta este regulile CSS care vă permit să gestionați stiluri de elemente în funcție de valorile parametrilor tehnici ai dispozitivelor. Cu alte cuvinte, această structură, care permite să se determine pe baza anumitor condiții care ar trebui să fie utilizate stiluri pe o pagină web, și care nu sunt.

anchete mass-media au fost în caietul de sarcini CSS3 și susținute astăzi în toate browserele moderne (Chrome 4 +, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Browser interogări media CSS3 Suport (interogări media)

Suport pentru interogări media în browser-ul IE8 este realizată prin conectarea la pagina respond.js script-ul.

interogări media sunt concepute pentru a crea un site-uri web cu design receptiv. Design receptivă este diferit de celelalte prin faptul că se poate „adapta“ (modificat), în funcție de tipul de lățimea ecranului are un dispozitiv (browser). Pentru a afla mai multe despre designul receptiv poate fi in articolul „Ce este aspectul adaptiv.“

Dar când crearea de pagini web adaptive, de asemenea, trebuie să acorde o atenție la meta viewport. Acest lucru asigură tag-ul de afișare corectă proiectează site-uri adaptive de pe ecranul dispozitivului având o densitate mare de pixeli. Cu alte cuvinte, stabilește o corespondență între rezoluția fizică și CSS pagina web. Mai în detaliu pentru a înțelege modul în care tag-ul meta viewport poate fi în articolul „Introducere în meta port de vizualizare“.

Conectarea meta tag-ul portului de vizualizare a paginii, în cele mai multe cazuri se efectuează după cum urmează:

interogări media de sintaxă

Utilizați următoarea sintaxă pentru a crea interogări media:

Tipurile de bază de dispozitive:

caracteristici media

Pentru compilarea condițiile în @media fukntsii pot folosi următoarele:

Utilizarea suporturilor de interogări fișiere CSS când este conectat

interogări media pot fi, de asemenea, utilizat ca valoarea elementului media link-ul de atribute. Acest lucru va permite, în funcție de setările dispozitivului pentru a determina care fișierele necesare CSS pentru a se conecta la o pagină, și care nu sunt. De obicei, această opțiune este utilizat atunci când diferite clase de dispozitive, este necesar să se aplice diferite stiluri CSS.

În plus, interogările mass-media pot fi, de asemenea, utilizat în regula @import. care este proiectat pentru a importa stiluri de alte fișiere CSS curent.

cereri media pentru Bootstrap 3

Organizarea de interogări media în xs ordine crescătoare a dispozitivelor din clasa, SM, MD si LG (implicit):

Cererile de mai sus ar trebui să fie folosite numai în această ordine.

Pentru a media interogări pot fi utilizate în orice secvență care trebuie extins pentru a include o expresie suplimentară max lățime. Acest lucru le va forța să lucreze numai în intervalul specificat.

cereri media pentru Bootstrap 4

cereri media Sintaxa pentru Bootstrap 4, care pot fi utilizate numai în ordinea următoare (creșterea secvențială în lățimea minimă a ferestrei de vizualizare)

Lista de cereri media pentru Bootstrap 4, care pot fi utilizate în foaia de stil în orice ordine:

Acest lucru se face după cum urmează:

De exemplu, această caracteristică poate fi utilizată pentru încărcarea asincronă a imaginilor, în funcție de dimensiunea imaginii curente un dispozitiv (browser).

Metoda matchMedia nu este acceptat de Internet Explorer 9, și alte browsere mai vechi. Pentru a oferi această funcționalitate în browsere mai vechi, puteți utiliza metoda MQ Modernizr bibliotecă.

Prompt, la fel ca în astfel de cazuri lupta? Mai degrabă problema explicație inteligibilă a principiilor.

Când creați este necesar un aspect de adaptare pentru a determina principalele puncte de referință. De exemplu, 576px, 768px, 992px și 1200px. Aceste puncte pot fi mai mult sau mai puțin, în funcție de aspectul pus în aplicare. Aceste puncte ar trebui să determine modificări în structura. Ie 576px să fie un marcaj la 576px și deasupra celuilalt, la 768px și încă mai mult o alta, etc.

În același timp, normele ar trebui să fie plasate în următoarea ordine:
Nu este necesar să le limiteze prin utilizarea max-lățime. Ie dacă aveți o lățime de browser CSS a zonei de lucru este, de exemplu 600px. Aceasta se va aplica CSS-proprietate cu condiția min-lățime: 576px. deoarece acestea sunt localizate după cele destinate pentru dispozitive de până la 576px. A stiluri pentru dispozitive> = 768px nu vor fi aplicate, lățimea curentă a dispozitivului nu îndeplinește această condiție.

Mulțumesc.
Aceasta este ordinea propisaniem punctele critice de control?