Com implementar consultes de mitjans per a dispositius mòbils

La consulta de mitjans és un mètode de CSS (Cascade Style Sheet). Es va introduir per primera vegada en CSS3. S'utilitza per incloure les propietats CSS al lloc web només quan es compleix una determinada condició. Les consultes de mitjans es col·loquen dins de la secció CSS, ja sigui en línia o un fitxer extern ' Style.css ”. La consulta de mitjans es refereix a tots els tipus de mitjans, inclosos ' tots ”, “ imprimir ”, “ pantalla ”, i “ discurs ”. Per implementar consultes multimèdia per a dispositius mòbils, el ' pantalla s'utilitzarà el tipus i el punt d'interrupció de '320px - 480px' es crearà.

Aquesta publicació esmentarà les directrius necessàries per implementar les consultes de mitjans.

Com implementar consultes de mitjans per a dispositius mòbils?

La consulta de mitjans es pot aplicar als dispositius mòbils només esmentant el ' @media ” i especificant la mida de la pantalla a les claus petites. El CSS per a aquesta consulta de mitjans es pot afegir dins de les claus. Sempre que la mida de la pantalla compleixi la mida especificada per l'usuari, aplicarà la consulta de mitjans indicada.

Anem a veure un exemple pràctic per aprendre la implementació de consultes multimèdia per a dispositius mòbils.

Exemple: creeu un disseny que canviï d'un disseny de dues columnes a un disseny d'una columna aplicant consultes multimèdia

A l'exemple següent, el disseny de la pàgina web canviarà d'un disseny de columna a un disseny d'una sola columna:

Pas 1: creeu una estructura HTML

Primer, creeu un fitxer HTML i enllaceu el fitxer de full d'estil CSS extern al seu secció.
A continuació, creeu un i afegiu l'encapçalament del lloc web amb l'opció
etiqueta.
Crea un
pel nom de classe 'container-class' i dos
més dins tenen el nom de classe ' columna ”.

< cos >

< h1 > Pista de Linux < / h1 >
< / capçalera>
< div classe = 'classe de contenidors' >
< div classe = 'columna' >
< h2 > Secció Primera < / h2 >
< pàg > Linux Hint és una de les millors plataformes d'aprenentatge electrònic. < / pàg >
< / div >
< div classe = 'columna' >
< h2 > Secció segona < / h2 >
< pàg > Linux Hint és una de les millors plataformes d'aprenentatge electrònic. < / pàg >
< / div >
< / div >
< / cos >

Pas 2: apliqueu CSS
A la secció del cos:

Primer, especifiqueu la secció del cos escrivint el ' cos ” etiqueta i esmentant les claus.
Dins de les claus, especifiqueu la família de tipus de lletra, el color de fons, el marge i el farciment.

A la secció:

Especifiqueu el color del text, l'alineació del text, el color de fons i el farciment.

A la 'classe de contenidors' div:

Estableix el ' visualització 'valor de la propietat a' flexionar ” per crear el Flexbox.
Utilitzar el ' justificar-contingut ” per afegir espai entre el contingut i afegir farciment.

A la classe de columna:

En primer lloc, especifiqueu el valor indicat al ' flexionar ” per afegir un espai entre les dues seccions de disseny.
Després d'això, afegiu el color de fons, la vora, el farciment i la mida de la caixa.

Pas 3: apliqueu la consulta de mitjans

Per aplicar la consulta de mitjans per a dispositius mòbils, primer, afegiu el ' @media ' etiqueta.
A continuació, especifiqueu el valor ' 768 píxels ” que és típic per als dispositius mòbils a la “ amplada màxima ” propietat dins dels petits tirants.
Després d'això, especifiqueu el ' columna ” valor a “ direcció flexible ' propietat que s'aplicarà a la ' classe de contenidors”. Això canviarà les dues columnes en una sola cada vegada que es detecti la mida de pantalla especificada.

Finalment, apliqueu CSS al ' columna ” classe i especifiqueu “ marge ' i ' flexionar ” valors:

cos {
família de tipus de lletra: sans-serif;
fons- color : plata;
marge: 0 ;
farciment: 0 ;
}

capçalera {
fons- color : #2f4f4f;
farciment: 20px;
text- alinear : centre;
color : blanc;
}

.contenidor- classe {
pantalla: flex;
justificar- contingut : espai-entre;
farciment: 20px;
}

.columna {
flexió: 0 1 calc ( 50 % - 10 píxels ) ;
frontera : 1 px verd sòlid;
fons- color : blanc;
mida de la caixa: capsa de vora;
farciment: 20px;
}

@ mitjans de comunicació ( màxim- amplada : 768 píxels ) {
.contenidor- classe {
flex-direcció: columna;
}
.columna {
flexió: 0 1 100 %;
marge inferior: 20px;
}
}

Sortida
Aquí teniu la sortida de la pàgina web després d'aplicar la consulta de mitjans. Aquesta sortida és un disseny responsiu de dues columnes:

Sempre que la pantalla compleix les dimensions especificades mitjançant una consulta multimèdia per a mòbils, es converteix en un disseny d'una columna:

Conclusió

Per implementar consultes multimèdia per a dispositius mòbils, primer, incloeu el ' mirador ' a la ' cap ” secció. A continuació, escriviu CSS específic per al disseny mòbil. Després d'això, afegiu la consulta de mitjans utilitzant l'etiqueta '@media' i especificant la mida de la pantalla del mòbil. Per exemple, especifiqueu 768 px per a tauletes i 480 px per a telèfons mòbils. En aquest article s'ha explicat el procediment per implementar consultes multimèdia per a dispositius mòbils.

Com implementar consultes de mitjans per a dispositius mòbils