Tengo una duda al respecto sobre los pixeles, incluso en el video no entendí de dónde sale el valor.
width: calc( (100% / 3) - 10px )
¿Nosotros establecemos ese valor, al tanteo? o ¿Cuál es el parámetro para darle ese valor?, Gracias.
Tengo una duda al respecto sobre los pixeles, incluso en el video no entendí de dónde sale el valor.
width: calc( (100% / 3) - 10px )
¿Nosotros establecemos ese valor, al tanteo? o ¿Cuál es el parámetro para darle ese valor?, Gracias.
En este caso le estas restando 10 pixeles al resultado de 100%/3
Hola Tania,
El uso de calc nos ayuda a realizar un "Calculo" de esta manera el codigo que nos muestras nos dice que: El ancho (Width) de la pantalla correspondiente al 100%, eso es un diseño responsivo ya que se ajustara al tamaño que identifica el navegador sin importar si es una tableta, escritorio movil vertical u horizontal. Este 100% se dividirá en 3 partes, es por eso que se utiliza la herramienta calc en CSS, de esta manera no tenemos que estar definiendo un valor para los diferentes dispositivos. Y por el final se restan 10 pixeles, estos pueden ser para margenes, padding etc. Como ves esto podría resultar en que cuando nuestra pagina se abre en un dispositivo 1680x1050 la división quedaría como 1680/3 = 560-10 = 550px (Valor que ocuparia cada uno de nuestras divisiones). Si el dispositivo que abre nuestra pagina es un telefono con pantalla 320 x 480 entonces la división quedaria como 320/3=106.66-10 = 96.66px
De esta manera nos despreocupamos de tener que realizar los calculos con pixeles y estar desarrollando codigo para cada una de nuestras pantallas mismo que se podría resolver con como el hacer un calculo desde un inicio.
Espero que esto te sirva y que tengas increibles diseños, saludos!
Muchas gracias, mi duda era al respecto de los 10 pixeles que aparecían en el ejemplo, lo demás ya me había quedado claro y de todas formas muchas gracias por explicarlo con más detalle