Buen dia para todos nosotros que queremos aprender un poquito mas con platzi, hoy les vengo a aportar un pequeño grano de arena de lo que he aprendido hasta ahora quiero mostrarles como pueden hacer un diseño responsivo con medidas de rem y que cada medida de rem sea de 10 px asi que vamos para alla :
Primer paso : tenemos que abrir nuestro Visual Studio Code y colocar html:5 :
Segundo paso : Ahora lo que tenemos que hacer es en nuestro body vamos a poner un div que se llame tutorial y se vera de esta forma :
Nota : no se les olvide que el respectivo div se debe colocar en el body y un pequeño truco al escribir div el programa de visual studio code nos ayuda a completar el codigo
Tercer paso : Ahora lo que vamos a colocar es que la medida de rem la coloquemos en 10 px para que se nos haga mas sencillo a la hora de utilizar la medida de rem :
Pues ustedes me estaran preguntando como haras para que un rem mida 10 px, si un Rem en realidad mide 16 px lo que vamos a hacer a continuacion sera hacer una regla de 3 , si el 100% de la medida que nosotros vemos es de 1 rem = 16 px , tenemos que multiplicar 10 x 100 y dividirlo entre 16 , que eso nos daria un total de 62,5. Y ahora como hacemos para llevar a cabo esta regla de 3 para que el visual studio code tome en cuenta este resultado y sepa que ahora queremos que 1 rem tenga 10 px.
Lo que tenemos que hacer a continuacion sera en el mismo comando de Style que debe estar ubicado en el HEAD del codigo que estamos haciendo de html tenemos que colocar lo siguiente :
<style><br> html {font-size: 62.5%;}<br></style>
Y al hacer esto automáticamente el Visual Studio Code se adapta a la medida que le estamos pidiendo que 1 rem equivalga a 10 px a continuacion les dejare un ejemplo :
Cuarto paso : Ahora tenemos que colocarle un fondo al tutorial y tambien la medida que queremos para nuestro titulo :
Ahora lo que tenemos que hacer para agregarle un tamaño al titulo seria con el siguiente comando
<style><br> div {font-size: 3rem;<br> background: red;}<br></style>
Quinto y ultimo paso : Ahora lo que vamos a hacer es lo siguiente que después de un cierto tamaño el fondo del titulo va a cambiar de color :
Y Ahora lo que queremos colocar es que despues de 300 px cambie de color el fondo y lo vamos a hacer de esta manera colocando esto en la etique de style :
@media (min-width: 300px) {
div {
background: purple;
}
}
https://prnt.sc/uukwsc4QwMXX
Y al colocar esto despues de los 300 px va a cambiar de color el fondo a color purpura de esta forma :
Menos de 300 px :
Mas de 300 px :
Este ha sido mi pequeño tutorial espero les halla gustado, apenas voy aprendiendo y espero que con el tiempo pueda hacerlo mucho mejor si tengo algun error me gustaria que me lo dijeran muchas gracias por la enseñanza
Curso de Frontend Developer
