Cita:
Iniciado por alejandromaringomez ¡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/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
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