Estamos listos para entrarle de lleno a RD
Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
¡Haz parte de este experimento de la hackaton de Platzi!
¡Haz parte de este experimento de la hackaton de Platzi!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 158
Preguntas 25
Estamos listos para entrarle de lleno a RD
Se debe optimizar para todos los dispositivos. Hay tiene que tener en claro un par de conceptos:
@media (min-width: #;) {"código que se aplicará"}
y se aplican para cada tamaño de dispositivo. El pixelaje dado será el break point.Lo más importante es diseñar para movil. Por lo que se debe diseñar con mobile first. Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.
Para aplicar media queries con buenas prácticas, hay que hacerlo en el header. Porque así solo se descarga el código necesario según el dispositivo, mientras que en CSS se descarga todo sin importar nada.
En la tag link
se colocan los atributos href
, rel
y, a partir del segundo archivo, el break point media="screen and (min-width: #px"
. El style.css debe estar hecho para mobile. Luego se pueden crear otros archivos como tablet.css o desktop.css.
¿Qué es Responsive Design?
Son todas esas técnicas que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de pantallas
250px-Diseno-web-responsive-design.jpg
Patrones en Reponsive Design:
Mostly Fluid
Colocación de columnas
Layout shifter
Tiny tweaks
Off canvas
Para mas información: https://mediaqueri.es
Conceptos nuevos:
Viewport: área visible del navegador
Portrait: vertical
Landscape: horizontal
Mobile first: empezar un websit desde la menor resolución soportada
Deskto first: empezar un websit desde la mayor resolución soportada
¿Cúal es mejor?: Técnicamente Mobile First
¿Qué son los breakpoint en responsive design?
Es el “punto” en el que el contenido y el diseño de un sitio web se adaptarán de cierta manera para brindar la mejor experiencia de usuario posible. Básicamente, los breakpoints son valores de píxeles que un desarrollador / diseñador puede definir en CSS. Cuando un sitio responsive alcanza esos valores de píxeles, se produce una transformación para que el sitio web ofrezca una experiencia de usuario óptima.
¿Qué es responsive design?
El responsive design permite que los sitios web “se adapten” a diferentes tamaños de pantalla sin comprometer la usabilidad y la experiencia del usuario. El texto, los elementos de la interfaz de usuario y las imágenes se redimensionan y cambian de tamaño según la ventana gráfica. El responsive design permite a los desarrolladores escribir un solo conjunto de código HTML, CSS y JavaScript para múltiples dispositivos, plataformas y navegadores.
What is Responsive Design?
Hola comunidad, este es mi portafolio actual, tiene media queries para distintias medidas y para detectar el modo oscuro/claro de tu navegador y lo implementa segun el tema activo. Me gustaría su feedback para ver si en sus pantallas se ve bien Portafolio
Les comparto tres páginas para responsive (gracias al instagram de Leonidas Esteban),
La forma en que yo practico es hacer mis apuntes de forma gráfica en CSS por cada bloque que vemos.
No se a ustedes pero a mi me provoco una gran emosion el aprender RD ❤️
Este es un pequeño resumen que hice, si consideran que la información está errada agradecería bastante una crítica constructiva
¿Cómo haces que nuestra aplicación o pagina web se vea bien en distintos dispositivo o plataformas de tamaños diferentes?
Responsive disign es la respuesta, pero ¿Qué es?¿Cómo funciona?
Para entender responsive disign hay que entender dos conceptos:
@media (min-width: #;) {"código que se aplicará"}
Ojo: la medida que va después de min-width es un break point, o sea la medida del width un dispositivo
Buenas Practicas
Desarrollar nuestras aplicaciones web con las metodología de Mobile first. Empezando a diseñar primero para los dispositos mas pequeños y luego ir aumentando el tamaña del dispositivo
Soy diseñador de WordPress y solía hacerlo de desktop a mobile. Hora de cambiar los hábitos 😃
En el curso de Desarrollo Web Online se explica muy bien el tema de RD. Muy buen curso.
Los media queries son la base de Bootstrap, Bootstrap está construido con media queries y pensando en Mobile First, aquí pueden ver algunas de las queries que usa Bootstrap
Media queries
Primero hay que comprender lo que es un breakpoint. Un breakpoint es una dimensión especifica en el viewport justo en el cual se va a generar un cambio.
Hay varias estrategias para implementar media queries, una de ellas y la más utilizada en nuestra era, es Mobile First.
El tema de la Cascada en CSS es importante en las media queries. Siempre empezamos desde el tamaño más pequeño hasta el más grande.
También se pueden aplicar desde el head en el** html**, y de hecho es una mejor practica, debido a temas de optimización. Por ejem, Un usuario que visite tu app web desde el teléfono, no debería descargar todo tu CSS para desktop.
CSS media queries
Las media queries (en español “consultas de medios”) son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).
Se utilizan para:
Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML.
Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener().
Fuente: https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries
Responsive design la característica que tiene los proyectos web para ajustarse de forma optima a diferentes dispositivos móviles.
La forma correcta de diseñar un producto web, es iniciando con el web mobile first/only.
Web mobile-first /only
Consiste en diseñar los productos en primera instancia para dispositivos mobiles y luego para tables para terminar con diseño para escritorio.
Break-point
O conocidos como puntos de quiebre en responsive design significa que la resolución de nuestro dispositivo llego a un tamaño en donde la interface tiene que cambiara para adaptarse y ser más optima.
Incorporar los Break-points
Dentro de la hoja de estilos del proyecto se pueden definir de la siguiente forma.
Iniciando con la resolución más pequeña(mobile first) y terminando con la resolución más grande.
Esto por aplica el algoritmo en cascada y si está el más grande al principio va a ignorar los demás estilos.
@media(min-width: 480px){
...
}
@media(min-width: 762px){
...
}
@media(min-width: 1024px){
...
}
Como mejor praxis es mejor tener una hoja de estilos por cada resolución y cargarlas desde el HTML, en el mismo orden del más pequeño al más grande.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="**width=device-width, initial-scale=1.0**"/>
<link rel="stylessheet" href="/css/style.css"/><!--Estilos enfocados para mobile-->
<link rel="stylessheet" href="/css/style.css" media="screen and (min-with:408px)"/>
<link rel="stylessheet" href="/css/style.css" media="screen and (min-with:768px)"/>
</head>
<body>
</body>
</html>
Mis apuntes pdf
Super interesante esta parte. Siento una revelación providencialj jajaja muchas gracias por esta info. Me va a servir muuucho! yo siendo un novato aplicaba toda la media queries en un mismo archivo CSS. Realmente me emociona el Mobile firt!
MEDIA QUERIES: son elementos llamados puntos de quiebre, ya que cuando se aplique uno, lo que se busca es que cuando se cumpla la condición del media query se ejecute dicha acción.
@media (min-height: 480){ //Aqui se define la condición del break point
... //Aqui se ejecuta la acción
}
@media (min-height: 768){
...
}
@media (min-height: 1024){
...
}
En una metodología donde empezamos a desarrollar nuestros proyectos desde un tamaño de un móvil, e ir escalando hasta llegar a un tamaño de escritorio, asegurándonos de que el contenido pueda verse de manera adecuada.
¿CÓMO FUNCIONA LAS HOJAS CSS EN EL RESPONSVE DESGIN?
Es importante saber que depende del tamaño que tiene un dispositivo, lo correcto seria que el navegador cargara el documento que tiene los estilos del sitio, según el tamaño, ya sea móvil, tablet, o pc, y eso lo logramos de la siguiente forma.
<link rel="stylesheet" href="css/style.css" media="screen and(min-width: 768px)">
De esta forma le decimos al navegador que documento css.
Resumen del capitulo en Notion
https://acortar.link/iXaKo
Usar mediaqueries con la Etiqueta link hace que tengas mayor rendimiento, ya que no descargará codigo de tablet o desktop en el caso de que lo vea en smartphone
Media queries
Permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición.
Con media queries podemos aplicar diferentes estilos de acuerdo a alguna característica de la pantalla (p.e. la resolución, el ancho o alto de la ventana del navegador, el tamaño del dispositivo, etc).
Generalmente se utiliza el ancho del navegador en pixeles (px) y existen algunos valores que nos pueden ayudar a determinar el tipo de dispositivo:
Si el ancho de la ventana es menor a 768px corresponde a teléfonos inteligentes.
Si es entre 768px y 992px corresponde a tabletas.
Si es entre 992px y 1200px corresponde a computadores de escritorio.
Si es mayor a 1200px corresponde a pantallas grandes.
A los puntos en los que cambia el contenido se les conoce como puntos de quiebre (breakpoints).
Para definir un media query utilizamos @media
seguido de una expresión que define para qué dispositivos van a aplicar los estilos que estén dentro de ese media query.
Mobile first
En mobile first las reglas CSS que están por fuera de media queries están dirigidas a teléfonos inteligentes y se utilizan media queries para ajustar el contenido a pantallas más anchas.
🐱💻 El Responsive Design es la técnica que permite la adaptabilidad de una Web a diferentes plataformas que tenemos actualmente.
41. Mis apuntes sobre: “Responsive Design: Media queries”
Es importante saber qué son los media queries, y los “breakpoints”, que te dirán a partir de qué punto se va a dimensionar.
Lo ideal es trabajar con “mobile first / only”.
La idea es que primero desarrollemos hacia mobile, y luego vayamos creciendo.
Se puede aplicar en el archivo CSS:
Se puede aplicar directamente en el HTML, lo cual es mejor práctica:
¿Qué es responsive design?
¿Qué necesitamos conocer para poder trabajar con responsive design?
¿Qué son los Breakpoints?
¿Qué son los Media queries?
@media (min-width: 480px)
{
...
}
¿Cuáles son las medidas que debemos usar para las pantallas de smartphone, tablets y laptops/desktop?
¿Qué metodología debemos de usar hoy en día con Responsive Design?
¿Qué es Mobile first/only?
¿Por qué debemos de escribir los Media queries partiendo desde el tamaño más pequeño hasta el más grande?
¿De qué formas podemos aplicar los Media Queries en nuestros proyectos?
¿Cuál es la mejor forma de implementar los Media queries en nuestros proyectos y por qué?
<link rel="stylesheet" href="./tablets.css" media="screen and (min-width: 720px)">
Este curso debería estar antes del curso de Frontend Developer
Resumen
HEY les tengo una herramienta que los volverá locos! “https://codepen.io” Búsquenlo y luego agradézcanme 😉
Empecemos con el responsive!
Fuente: silocreativo.com
Pequeño artículo que quizás quieran leer (en inglés) https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/
Yo aprendí Responsive en el curso de Leonidas.
Pero ahí no vimos lo de trabajar desde Mobile.
Así que espero aprender un montón 😄
Para los que usan chrome, pueden isntalar esta extensión, lo que hace básicamente es mostrar multiples pantallas de dieferente pixelaje al mismo tiempo para observar cómo se vería nuestra app en cada una de ellas. Espero les sirva.
La mejor forma de hacer uso de las media-queries
es desde los links
en el head
, esto se debe a que los links solo van a cargar los archivos
correspondientes cuando el Navegador tenga la resolución indicada en el atributo media.
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_table.css" media="screen and (min-width: 768px)">
Nota: recordar siempre colocar los media-queries en ascendente, es decir:
@media (min-width: 768px) {...}
@media (min-width: 992px) {...}
@media (min-width: 1200px) {...}
Yo no sabía lo que dijo sobre los links, pero se nota que Diego se esmera en dar lo mejor en cada clase
les dejo mis notas de la clase
Esto se está poniendo bueno
0Con el crecimiento del uso de dispositivos portátiles (teléfonos, tablets) es requerido un método que adapte la parte visual de la web a cualquier tamaño de pantalla, no solo al tamaño de pantalla de una PC.
Es un técnica que consiste en adaptar la parte visual de una web, para que se vea correctamente en cualquier tamaño de pantalla.
Para ello se hace uso de herramientas como
@media querys
que nos permiten seccionar el código CSS mediante un tamaño de pantalla establecido.
Lo que se trata de lograr con el responsive design es ofrecer:
Para desarrollar un diseño responsivo es necesario hacer uso de 2 conceptos básicos:
Es un tamaño determinado de pantalla (punto) el cual establece un cambio en la visualización del sitio web (cambia su apariencia) para adaptarse a un tamaño de pantalla especifico.
Los breakpoints se utilizan en los media querys para llevar a cabo el responsive design.
“Consultas de medio” es la sintaxis que permite modificar la visualización de la web en función del tipo de dispositivo.
Su principal característica es la servir de condicional para aplicar una o unas determinadas reglas css, que modifiquen la apariencia del sitio web.
breakpoints
Recomendado o más utilizadosPara responder este punto es necesario responder la siguiente pregunta:
breakpoints
más comunes?En realidad no existe un patrón que nos dicte que breakpoints
deben ser utilizados como puntos de referencia para adaptar el sitio web, sin embargo actualmente se tiene una lista de puntos de quiebre, basados en los frameworks css más populares, como: bootstrap, bulma, etc
y estos son:
320px - 480px: Mobile devices
481px - 768px: iPads, Tablets
769px - 1024px: Small screens, laptops
1025px - 1200px: Desktops, large screens
1200px - to more: Extra large screens, TV
Se pueden tomar breakpoints
de referencia de sitios web conocidos, estos son:
Smartphone 320px
Tablet 768px
Netbook 1024px
Desktop 1600px
Existen diferentes formas de agregar un media query dentro un sitio web.
@media query only screen and (min-width: 20px){
/*
REGLAS CSS QUE SE APLICARAN EN PANTALLAS CUYO ANCHO SEA MAYOR A LOS 20PX
*/
}
Es la forma recomendada de realizar el responsive design de un sitio web debido a que optimiza la carga de recursos css
<!-- Estilo por defecto para mobile -->
<link href="mobile.css" rel="stylesheet" />
<!--
Estilo que solo se cargara cuando el tamaño de pantalla sea mayor a 1024px
(también se cargará el archivo **mobile.css)**
-->
<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 1024px)" />
<!--
Estilo que solo se cargara cuando el tamaño de pantalla sea mayor a 1400px
(también se cargará el archivo **mobile.css** y **tablet.css)**
-->
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 1400px)" />
Es una técnica responsive design centrada y optimizada en el desarrollo del sitio web para una visualización en un teléfono.
Se inicia el teléfono 📱 y luego se desarrolla para el resto de dispositivos 💻
Gracias a platzi porqeu permite tomar estos cursos en 2x 😄
Se viene lo chido!
Para aquellos que nos confundimos con max y min width.
✔ (min-width: 320px) → Desde los 320px hasta nuevo breakpoint se aplican los cambios
✔ (max-width: 320px) → Hasta los 320px se aplican los cambios
Este curso lo deberian de ver todas las instuciones de educacion y gobierno en Mexico, sus paginas son horribles.
Aplicacion directa en HEAD (mejor practica)
También es buena practica usar el Mobile First, porque se ahorra mucho código, puede ser mas ordenado, y de realiza de una manera mas rápida y sencilla. Así cuando tengamos que entregar un proyecto a un cliente, haciendo Mobile First podemos entregar mas rápido una muestra de la pagina.
Mi resumen:
HTML
<header>
<h1>Responsive Desing</h1>
</header>
<section>
<article>
<h2>¿Que es responisive design?</h2>
<p>
Es una serie de estategias que llevan a que el contenido de un poyecto web esté optimizado para ver en cualquier
dispositivo.
</p>
</article>
<article>
<h2>Media querys y break points</h2>
<p></p>
<h3>Break Points</h3>
<p>Son dimensaiones en los que se determina el punto de partida para que un contenido se reorganice</p>
<h3>Media querys</h3>
<p>Es un selector de CSS que permite colocar un break point. Son similares a lo siguiente:</p>
<p><code>@media (min-width: 480px{ ... })</code>.</p>
<p>
Esto quiere decir: cuando la pantalla (media) sea mas pequeña (min-width) que 480px, se tomarán los estilos que están
dentro de los corchetes
</p>
<p>La mejor práctica para colocarlos es desde el head de HTML del siguiente modo:</p>
<p><code><link rel="stylesheet" href="style.css"></code>*</p>
<p><code><link rel="stylesheet" href="tablet.css" media="screen and (min-width:768)"></code></p>
<p><code><link rel="stylesheet" href="desktop.css" media="screen and (min-width:1024)"></code></p>
<p>
*El primer enlace a la hoja de estilos (el CSS principal) debe ser para mobiles, de este modo se aplica el método Mobile
First
</p>
</article>
</section>
Wow! quede asombrado con el uso de los media queries en diferentes archivos de css y lo eficiente que debe ser al cargar. Definitivamente el desarrollo web es un mundo en donde la creatividad y el entontrar soluciones diferentes es muy importante 😄
Veo que en el sitio de Platzi no se usa CSS diferenciado por el viewport como lo indican en el video. ¿Será porque se está usando React?
Media Queries:
Cuando la pantalla sea más chica que esto, el código que este dentro va a suceder y así sucesivamente.
Breakpoints: Son la dimensión en el viewport (o el width de la pantalla) en el que se genera un cambio. Es el cambio donde se reposicionan o redimensionan ciertos elementos o contenedores para que se vea bien sin importar el dispositivo donde estés.
Hay diferentes estrategias para responsive design, la recomendada es Mobile First o Mobile Only que se hace teniendo el código base (código hecho y optimizado para mobiles), luego breakpoints para los demás dispositivos. De chicas a grandes.
La captura de arriba es aplicada en CSS y no es una muy buena práctica, la mejor práctica sería de la siguiente manera:
en el head del html lo que hacemos es, en lugar de mandar llamar un solo archivo de CSS, mandamos llamar varios archivos de CSS dependiendo para que dispositivo estén hechos.
Iniciar a trabajar el diseño desde los dispositivos mobiles.
Lo implementamos desde las pantallas más chicas a las más grandes según los breakpoints.
La mejor practica es aplicarlo en el head del html:
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
También los podemos aplicar en el archivo CSS.
@media (main-width: 480px) {
}
@media (main-width: 760px) {
}
PATRONES DE RD — EN/ES
.
-Mostly Fluid – Mayormente Fluido
-Column Drop – Colocación de Columnas
-Layout Shifter – Cambio de Diseño
-Tiny Tweaks – Pequeños Retoques
-Off Canvas – Fuera del lienzo
Usen Responsively + Live Server y así podrán ver en real-time cómo les funcionan sus media queries en varias pantallas y dimensiones al tiempo 😉
* Responsive Design
* Media Queries
Metodologia
Primero empezar a disenar desde la pantalla de un celular, luego desde tablet y por ultimo pc.
Mobile First / Only
Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.
Media Queries: son condicionales. No es la mejor práctica pero aplicándolo al CSS: @media (min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo.
se puede aplicar desde css
pero lo recomendable es manejar un archivo para cada brakpoint y llamarlos dede head por medio de link, esto es dependiendo desde que dispositivo se genere el codigo, esto hace que el usuario solo descargue el coodigo necesario de acuerdo a su dispositivo.
mas infor ver diapositivas
Notas de la clase
Hago un pequeño aporte… en el minuto 1:44 Diego comete un pequeño error ( se confundió, porque es claro que el la tiene clara)… el breakpoint indica que el tamaño mínimo es 480px, en esos media query no esta contemplado por debajo de los 480px, osea que indica que cuando el tamaño sea mínimo 480px toma el primer breakpoint, pero si tiene mas 768px y sobre escribe algún estilo, le da prioridad sobre el anterior breakpoint y solo aplica para pantallas por encima de 768px y así pasaría en el de 1024px dandole prioridad sobre los otros breakpoint.
Para que funcione como el dice es usar el max-width.
Saludos y feliz código!! 😃
Muy buena explicación lo entendí mejor que nunca ty diego
Responsive Design: Media Queries, VeiewPoints.
Mobile first/only - estrategia de diseño para dispositivos moviles.
Head-Contiene diferentes archivos de css.
.
Interesante tip de separar los estilos, no lo sabía, gracias profesor 😁.
Tiene mucho sentido el Mobile First/Only, es cierto qué se debe a qué la mayor parte del aceso a internet es desde “smartphones”, aunque la razón lógica y elemental es qué es sencillo saber acomodar en un espacio reducido y de ahí acomodar lo mismo en un mayor espacio, qué a tener tus objetos/items/etc acomodados en un lugar espacioso y después acomodarlos en un lugar reducido.
Medidas de dispositivos para tener en cuenta a la hora de hacer Responsive design
A carachas, yo hacía todo lo contrario en Figma, primero realizaba el prototipo para desktop y después para movil :c
Hice algo de responsive en los retos, pero no separé los media queries en archivos separados.
Los puse dentro del mismo CSS, pero eso sí, Mobile First!
mi resumen
Apuntes de esta clase en notion:
https://xywvanzz.notion.site/Responsive-design-00492e2251a74ed78d0f7fa3fc5957e7
Me parece importante hacer esta observación, los quiz ayudan a reforzar lo aprendido y me gusto que se aplique con mas de 6 preguntas pues ayuda a reforzar mas
Toda web hoy en día debe ser responsive. Otro punto muy importante es Mobile First y de eso partir hacia la web. Las personas hoy en día están mayoritariamente frente a un dispositivo.
Break point
media queris
/* Estilos para pantallas >= 480px*/
@media (min-width: 480px) {
...
}
/* Estilos para pantallas 480px < y >= 768px*/
@media (min-width: 768px) {
...
}
/* Estilos para pantallas 768px < y >= 1024px*/
@media (min-width: 1024px) {
...
}
Mobil First / Only
<link href="index.css" rel="stylesheet"> <!-- Estilo basicos y mobil -->
<link href="index_T.css" rel="stylesheets" media="screen and (min-width: 768px)"> <!-- Estilos exclusivos para tablet -->
```css
RESUMEN CLASE 44:
RESPONSIVE DESIGN
MEDIA QUERIES
I.- Mobile First / Only Desde CSS
@media (min-width: 480px) {
....
}
@media (min-width: 768px) {
....
}
@media (min-width: 1024px) {
....
}
II.- Mobile First / Only Desde Head
<link href="style.css" rel="stylesheet"> <!-- Tus estilos enfocados a mobile -->
<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 768px)">
No sabía que podía aplicar mediaqueries directamente para aprovechar usar el menor código posible…
Información resumida de esta clase
#EstudiantesDePlatzi
Importante que nuestros proyectos creados con buenas prácticas sean multiplataforma, hacerlo bien es importante
Recordemos que el código es leído en cascada
Iniciamos diseñando desde un dispositivo pequeño a uno más grande
Los media queries son el bloque de código que evalúa el tamaño de la pantalla y corre el código según el resultado
Existen diferentes estrategías para él response design, se recomienda usar la “mobile first” en donde iniciamos creando el diseño para dispositivos mobile.
Este llamado del CSS lo hacemos desde HTML teniendo en cuenta la lectura de cascada
Excelente introduccióm
No conocía esto de separar los media queries en archivos. Que excelente práctica.
Les dejo aquí unas lecturas muy interesantes de Responsive:
uso de media query en etiqueta link. Buena Práctica 🙂
Usar mediaqueries con la Etiqueta link hace que tengas mayor rendimiento, ya que no descargará codigo para el dispositivo en el que veas la pagina web.
Súper emocionado con la clase y con ganas de aprender más.
Yo no sabia nada sobre el RD, y me da mucha emoción aprenderlo y aplicarlo 😄
Mobile first y responsive design con documentos css
Mind blowing 🤯
No había tenido en cuenta cuán importante es el responsive design
Justo lo que buscaba. Listo para aprender
No sabía que existía el atributo media en la etiqueta link. Pedazo de dato. Este curso está buenísimo.
Lo mejor del curso
Lo más importante es diseñar para movil. Por lo que se debe diseñar con mobile first. Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.
Para aplicar media queries con buenas prácticas, hay que hacerlo en el header.
Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.
Media Queries: son condicionales.
Hasta el momento no he trabajado con mobile first, y ahora entiendo la importancia que tiene, dado que la mayoría de las personas ingresan hoy en día desde ese tipo de dispositivos.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.