Home-theater-designers
Si voleu desenvolupar llocs web / aplicacions web, és imprescindible saber com crear dissenys responsius per al vostre èxit.
En el passat, la creació de llocs web que s’adaptaven bé a diferents mides de pantalla era un luxe que els propietaris de llocs web havien de sol·licitar a un desenvolupador. No obstant això, l'augment de l'ús de telèfons intel·ligents i tauletes ha convertit el disseny sensible en una necessitat en el món del desenvolupament de programari.
Utilitzar consultes multimèdia és la millor manera d’assegurar-vos que el vostre lloc web / aplicació web aparegui exactament com vulgueu a tots els dispositius.
Comprensió del disseny sensible
En poques paraules, el disseny sensible s’ocupa d’utilitzar HTML / CSS per crear un disseny de lloc web / aplicació web que s’adapti a diverses mides de pantalla. A HTML / CSS hi ha algunes maneres diferents d’aconseguir la capacitat de resposta en el disseny d’un lloc web:
- Utilitzar unitats rem i em en lloc de píxels (px)
- Configuració de la finestra gràfica / escala de cada pàgina web
- Utilització de consultes multimèdia
Què són les consultes multimèdia?
Una consulta multimèdia és una característica de CSS que es va publicar a la versió CSS3. Amb la introducció d’aquesta nova característica, els usuaris de CSS poden ajustar la visualització d’una pàgina web en funció de l’altura, l’amplada i l’orientació del dispositiu / pantalla (mode horitzontal o vertical).
Llegiu-ne més: el full de trucs de les propietats essencials de CSS3
Les consultes de suports proporcionen un marc per crear codi una vegada i utilitzar-lo diverses vegades al llarg del programa. Pot ser que això no sembli tan útil si esteu desenvolupant un lloc web amb només tres pàgines web, però si esteu treballant per a una empresa amb centenars de pàgines web diferents, això resultarà un gran estalvi de temps.
Ús de consultes multimèdia
Hi ha diverses coses que heu de tenir en compte a l’hora d’utilitzar consultes de suports: estructura, ubicació, abast i enllaços.
L’estructura de les consultes de mitjans
Exemple d'una estructura de consulta de suports
@media only/not media-type and (expression){
/*CSS code*/
}L’estructura general d’una consulta de mitjans inclou:
- La paraula clau @media
- La paraula clau no només
- Un tipus de suport (que pot ser de pantalla, d'impressió o de veu)
- La paraula clau i
- Una expressió única entre parèntesis
- Codi CSS inclòs en un parell de claus obertes i tancades.
Relacionat: Ús de CSS per formatar documents per imprimir
Exemple de consulta multimèdia amb l'única paraula clau
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}L'exemple anterior aplica l'estil CSS (específicament un color de fons blau) només a les pantalles de dispositius que tinguin una amplada inferior o igual a 450 px, de manera que bàsicament els telèfons intel·ligents. L'única paraula clau es pot substituir per la paraula clau no i, per tant, l'estil CSS a la consulta multimèdia anterior només s'aplicaria a la impressió i al discurs.
Tanmateix, per defecte, una declaració general de consulta sobre suports s’aplica als tres tipus de suports, de manera que no cal especificar-ne un tret que es pretengui excloure’n un o més.
Exemple de consulta de suports predeterminats
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}Col·locació de consultes multimèdia
Una consulta multimèdia és una propietat CSS; per tant, només es pot utilitzar dins del llenguatge d'estil. Hi ha tres maneres diferents d’incloure CSS al vostre codi; tanmateix, només dos d'aquests mètodes proporcionen una manera pràctica d'incloure consultes de suports als vostres programes (CSS intern o extern).
El mètode intern inclou afegir l'etiqueta a l'etiqueta del fitxer HTML i crear la consulta multimèdia dins dels paràmetres de l'etiqueta.
El mètode extern consisteix a crear una consulta multimèdia en un fitxer CSS extern i enllaçar-lo al fitxer HTML mitjançant l'etiqueta.
La gamma de consultes multimèdia
Tant si les consultes multimèdia s’utilitzen mitjançant CSS intern com extern, hi ha un aspecte important del llenguatge d’estil que pot afectar negativament el funcionament d’una consulta multimèdia. CSS té una regla d’ordre de precedència. Quan s'utilitza un selector CSS o, en aquest cas, una consulta multimèdia, cada nova consulta multimèdia que s'afegeix al fitxer CSS substitueix (o té prioritat) la anterior.
El codi de consulta multimèdia predeterminat que tenim anteriorment s'orienta als telèfons intel·ligents (450 px d'ample i menys), de manera que, si voleu establir un altre fons per a les tauletes, podeu pensar que només podeu afegir el següent codi al fitxer CSS preexistent.
Exemple de consulta de suports de tauleta
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
L'únic problema és que, a causa de l'ordre de precedència, les tauletes tindrien un color de fons vermell i els telèfons intel·ligents ara també tindrien un color de fons vermell, ja que els 450 px o menys tenen menys de 800 px.
Una manera de solucionar aquest petit problema seria afegir la consulta multimèdia de les tauletes abans que les dels telèfons intel·ligents; el segon substituiria el primer i ara tindríeu telèfons intel·ligents amb un color de fons blau i tauletes amb un color de fons vermell.
No obstant això, hi ha una manera millor d’aconseguir un estil separat per a telèfons intel·ligents i tauletes sense preocupar-se per l’ordre de precedència. Aquesta és una característica de les consultes de suports conegudes com a especificació d’interval, on el desenvolupador pot crear una consulta de suports amb l’amplada màxima i mínima (l’interval).
Consulta de suports de tauleta amb exemple de rang
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
Amb l'exemple anterior, la col·locació de consultes multimèdia dins d'un full d'estil esdevé irrellevant ja que el disseny per a tauletes i telèfons intel·ligents s'orienta a dues col·leccions d'amplada separades.
Enllaç de consultes multimèdia
Si no voleu incrustar consultes multimèdia al vostre codi CSS, hi ha un mètode alternatiu que podeu utilitzar. Aquest mètode consisteix a utilitzar consultes multimèdia a l'etiqueta d'un fitxer HTML, de manera que en lloc de tenir un full d'estil massiu que contingui les preferències d'estil per a telèfons intel·ligents, tauletes i ordinadors, podeu utilitzar tres fitxers CSS diferents i crear les vostres consultes multimèdia a l'etiqueta.
L'etiqueta és un element HTML que s'utilitza per importar l'estil CSS des d'un full d'estil extern. Aquesta etiqueta té una propietat multimèdia que funciona de la mateixa manera que ho faria una consulta multimèdia a CSS.
Ús de consultes multimèdia a l'exemple d'etiqueta d'enllaç
href='tablet.css'>
El codi anterior s’ha de col·locar a l’etiqueta del fitxer HTML. Ara només cal que creeu tres fitxers CSS separats amb els noms de fitxers main.css, tablet.css i smartphone.css; després creeu el disseny específic que vulgueu per a cada dispositiu.
L'estil del fitxer principal s'aplicarà a totes les pantalles amb una amplada superior a 800 px, l'estil del fitxer de la tauleta s'aplicarà a totes les pantalles amb una amplada d'entre 450 px i 801 px i l'estil del fitxer del telèfon intel·ligent s'aplicarà a totes les pantalles següents 451 px.
descarregar vídeo de youtube al rotlle de la càmera de l'iPhone
Ara teniu les eines per crear dissenys responsius
Si heu arribat al final d’aquest article, heu pogut saber què és el disseny sensible i per què és útil. Ara podeu identificar i utilitzar consultes multimèdia en fitxers CSS i HTML. A més, se us va introduir l'ordre de precedència a CSS i vau veure com podia afectar el funcionament de les vostres consultes multimèdia.
Crèdit de la imatge: Espai negatiu / Pexels
Compartir Compartir Tweet Correu electrònic Com definir una imatge de fons a CSSCSS és una potent eina per dissenyar pàgines web. Aprendre a col·locar una imatge de fons us ensenya molts conceptes bàsics sobre CSS.
Llegiu a continuació Temes relacionats- Programació
- Desenvolupament web
- Web Design
- CSS
Kadeisha Kean és un desenvolupador de programari complet i escriptor tècnic / tecnològic. Té la capacitat diferent de simplificar alguns dels conceptes tecnològics més complexos; la producció de material fàcilment comprensible per a qualsevol novell en tecnologia. L’apassiona escriure, desenvolupar programes interessants i viatjar pel món (a través de documentals).
Més de Kadeisha KeanSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us