Ver Mensaje Individual
  #10 (permalink)  
Antiguo 21/09/2014, 07:29
Triby2
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 10 años, 4 meses
Puntos: 30
Respuesta: 'Fonts' y navegadores

Cita:
Iniciado por alejandromaringomez Ver Mensaje
¡Hola amiguetes! ,
Lo he hecho y probado, la verdad es que no he solucionado con el line height, pero lo del font size lo hize como podéis ver en la imagen y es muy pequeño y no funciona, la verdad que no sé que puede ser :(

Muchas gracias :D
Bueno, ves jugando con los valores de font-size, eso sí.... ¿no habrás puesto el font-size FUERA de los media-querieres, verdad?

Si te sale la fuente pequeña, me das a entender que lo has puesto solo en el media-querie para dispositivos..

para solventar ese problema, tienes que poner uno en el general (para cuando lo visualize un ordenador, otro en una media-querie para tables, otro para smartphones y si nos ponemos perfeccionistas, el que va para smarthpones, lo debes de dividir en dos (uno para cuando la pantalla esté en posición landscape (horizontal) y otra para portrait (vertical).

Te añado la lista de media-queries standard, (lo que deberías de tener en todas tus webs para que se visualizen en cualquier tipo de dispositivo existente)

Código CSS:
Ver original
  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 480px) {
  5. /* Styles */
  6. }
  7.  
  8. /* Smartphones (landscape) ----------- */
  9. @media only screen
  10. and (min-width : 321px) {
  11. /* Styles */
  12. }
  13.  
  14. /* Smartphones (portrait) ----------- */
  15. @media only screen
  16. and (max-width : 320px) {
  17. /* Styles */
  18. }
  19.  
  20. /* iPads (portrait and landscape) ----------- */
  21. @media only screen
  22. and (min-device-width : 768px)
  23. and (max-device-width : 1024px) {
  24. /* Styles */
  25. }
  26.  
  27. /* iPads (landscape) ----------- */
  28. @media only screen
  29. and (min-device-width : 768px)
  30. and (max-device-width : 1024px)
  31. and (orientation : landscape) {
  32. /* Styles */
  33. }
  34.  
  35. /* iPads (portrait) ----------- */
  36. @media only screen
  37. and (min-device-width : 768px)
  38. and (max-device-width : 1024px)
  39. and (orientation : portrait) {
  40. /* Styles */
  41. }
  42.  
  43. /* Desktops and laptops ----------- */
  44. @media only screen
  45. and (min-width : 1224px) {
  46. /* Styles */
  47. }
  48.  
  49. /* Large screens ----------- */
  50. @media only screen
  51. and (min-width : 1824px) {
  52. /* Styles */
  53. }
  54.  
  55. /* iPhone 4 ----------- */
  56. @media
  57. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  58. only screen and (min-device-pixel-ratio : 1.5) {
  59. /* Styles */
  60. }

Pues bien, en cada una de ellas, deberías de poner un font-size, entre otras características para que se visualize correctamente el texto en este caso.

Aquí herramientas que quizás desconozcas para visualizar desde la web como se ven tus proyectos en otros dispositivos: (de esta manera podrás modificar el css para cada dispositivo, en el mismo momento y así poder hacer un mejor trabajo antes de entregar el proyecto) ;)

http://www.responsinator.com/
http://mattkersley.com/responsive/

solo pega la web de tu proyecto en la esquina superior derecha

Última edición por Triby2; 21/09/2014 a las 08:30 Razón: Añadido css y herramientras