Foros del Web » Creando para Internet » CSS »

Tamaños en px o porcentajes

Estas en el tema de Tamaños en px o porcentajes en el foro de CSS en Foros del Web. Hola, me surge una duda que no puedo encontrar algo en internet que me ayude ya que existen diversidad de cosas. Estoy realizando una web ...
  #1 (permalink)  
Antiguo 17/07/2012, 22:55
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 1 mes
Puntos: 4
Tamaños en px o porcentajes

Hola, me surge una duda que no puedo encontrar algo en internet que me ayude ya que existen diversidad de cosas.

Estoy realizando una web y necesito saber lo siguiente:

Tengo un div que esta con width:100%. dentro de este hay un div que tiene como max-width:1180px y como min-width:980px. adentro de este tengo que poner 2 divs mas (uno con float left y otro con right). la pregunta es: ¿a estos le pongo el ancho en pixeles o porcentaje?
  #2 (permalink)  
Antiguo 18/07/2012, 12:36
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Tamaños en px o porcentajes

considerando que diste un ancho variable (mínimo y máximo) a su contenedor no sería mala idea dar porcentaje a las columnas.
Otra opcion es que trabajes con media queries
  #3 (permalink)  
Antiguo 18/07/2012, 15:32
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: Tamaños en px o porcentajes

Pero el problema es el siguiente: si yo tengo un div que ocupa el100% del width y tiene un min-width de 980px. Adentro de este div tengo 2 div, uno que tiene 65% de width y otro con 30% de width. el contenido de esos dos width (ya sean textos o imagenes o lo que sea) deberian estar en px o en porcentaje?
  #4 (permalink)  
Antiguo 18/07/2012, 16:23
 
Fecha de Ingreso: diciembre-2008
Mensajes: 44
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Tamaños en px o porcentajes

Te aconsejo que uses medidas relativas % para cajas, em para tipografia y píxeles sólo para medidas exactas como los límites de min-widht, max-widht...
Creo que deberías buscar sobre responsive design y uso de las media queries para aprender a ajustarlo desde una pantalla móvil a una pantalla de monitor. Lo digo porque yo esto aprendiendo sobre este tema y me ha llamado la atención que pusieras un min-width de 980 cuando hay muchos tablets de 800x600px. Bueno es una recomendación. Te aconsejo los videos de Wackkos en el canal de Youtube de desarrolloweb.com o el canal de Leonidas Esteban de mejorando.la donde tienen videos muy fáciles de entender. Empieza por los 2 que tiene Leonidas que verás rápidamente como funciona.

Respecto a tu pregunta la caja que hace de contenedor debe tener width:100% y los divs si a uno le pones 65%, al otro 35% y no 30, la suma siempre tiene que darte 100. Luego las imágenes y textos segun responsive design siempre en relativas, como dije en la primera línea al comenzar este comentario.

Saludos
  #5 (permalink)  
Antiguo 19/07/2012, 07:40
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Tamaños en px o porcentajes

Planteas una pregunta que no puede tener una sola respuesta, es decir no es que la unica opcion válida es usar % o usar px, sino que si quieres una maqueta líquida usas % y si quieres una maqueta fija usas px, y si quieres una maqueta flexible usas min y max width mas media queries, son 3 formas distintas de encarar el problema en funcion del diseño que tengas o la idea que sigas.
Si usas media queries no estas obligado ni es mejor practica usar % para las cajas (estructura, layout), ya que justamente lo usas para controlar los px de tu width. Aunque tampoco es mejor usar px, ya que tu idea puede ser hacer una maqueta líquida.
En fin, todo depende, no hay una única solución.
  #6 (permalink)  
Antiguo 19/07/2012, 12:21
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: Tamaños en px o porcentajes

Yo ya estoy decidido en utilizar porcentaje. Mi problema no es con los divs sino con el contenido de estos (los textos, fotos, listas, tablas, etc). Ese contenido, por ejemplo si pongo un tag <p></p>, y en el estilo de este le pongo que el font-size sea 19px. si la pagina la abren en una resolucion grande, quedara todo bien en cambio si lo abren de una netbook donde la resolucion es mas chica, o de una tablet, esto quedaria diferente. ese es mi problema al cual todavia no encuentro una respuesta. saludos
  #7 (permalink)  
Antiguo 20/07/2012, 08:44
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Tamaños en px o porcentajes

Ese problema lo puedes solucionar de diferentes formas.
Una forma fea: usar el px para textos y cajas contenedoras.
Ventaja: se verá (casi) igual en todos los navegadores.
Desventaja: quien quiera agrandar un texto te va a odiar, quien tenga una resolucion distinta a la tuya verá mal tu sitio (salvo que uses @media screen, lo vemos en la forma linda)
Una forma linda: usas em para textos y min-width/max-width/px/media-queries para las cajas contenedoras. De modo tal que sigues teniendo el control del diseño (con px) (y sobre cada "resolucion" que declares) sin poner obstaculo a las recomendaciones de acceso al contenido (googlear: accesibilidad html w3c).

Sobre "que quede igual", hay cientos de dispositivos, resoluciones, navegadores (cada uno de ellos tiene algún enfoque particular (googlea "prefijos propietarios css")) y estándares nuevos (w3c) cada día.
Compatibilidad multinavegador: googlea o haz una pregunta específica sobre user-agent, modernizr, hojas de estilos condicionales.
Compatibilidad multiresolucion: googlea tipos de medios, media-queries, responsive web design.

pd:
@media screen en el twitter boostrap
@media screen en html5boilerplate (línea 351 en adelante)

Última edición por cristian_cena; 20/07/2012 a las 09:01

Etiquetas: divs, porcentajes, tamaños
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:23.