Programación web en distintas resoluciones

No es algo que se pueda enseñar en una respuesta, pero no es complicado ir aprendiendo.

Tendrías en principio que usar "em" por ejemplo en lugar de "px". Para un tamaño de fuente del 100% 1 em=16 px. Tienes que tener algunos conocimientos más avanzados pero no complicados de como se comporta. Puedes buscar información sobre las distintas medidas en que puedes expresar las fuentes.

Así todo en tu hoja de estilos (no necesitas hacer más de una) puedes hacer distyintas especificaciones según la resuloción de la pantalla. Para ello necesitas conocimientos más avanzados, y tampoco excesivamente complicados, de CSS3 y saber manejar. Prueba esto y verás como cambia si ensanchas o disminuyes el ancho de la ventana del navegador (pon cualquier imagen como logotipo.png). Con un ancho de la ventana del navegador mayor de 700 px estará alineada a la izquierda, con un ancho entre 600 y 700 px a la derecha y para uno menor de 600px en el centro:

HTML

<div id="header"><img src="logotipo.png"></div>

 CSS

div#header {text-align: left;width: 100%;}@media only screen and (max-width:700px) {div#header {text-align: right;}}@media only screen and (max-width:600px) {div#header {text-align: center;}}

Gracias por contestar.

Miraré lo que me dices, de momento seguiré como lo tengo (estoy haciendo otras cosas). Lo del tipo "em" ya lo había visto, pero nunca lo he utilizado ... de todas maneras a "bote pronto", la equivalencia de 1em=16px ... me parece exagerado, ya que 8px, tendría un equivalente de 0.5em (¿admite valores decimales?).

Me comentas que solo puedo tener una hoja css, y distintas especificaciones para las resoluciones que desee ... bueno, tener varias especificaciones, p.ej 3, para otras tantas resoluciones de pantalla, es como meter tres hojas css en una ... pero bueno para gustos los colores ... teniendo en cuenta que según qué cosas funcionan diferente en un navegador u otro, se me antoja un poco ... (obvio el adjetivo) ...

Lo probaré.

Gracias.

Claro que admite decimales "em", si no sería imposible trabajar así :).

Por comodidad puedes trabar varias hojas de estilo, de hecho se suele hacer así, aunque al final solo se utiliza una (haciendo includes de las demás) y de forma acosejable, comprimida. Si utilizas por ejemplo Boilerplate tendrás definidos los botones en una, la tipografía en otra, variables en otra, cada resolución en su hoja correspondiente, etc. y al final generas una única hoja de estilos.

Ten en cuenta que eso te permite que sea la propia hoja de estilos la que decida que distribución y tamaños usar en función del tamaño de la ventana. Si usas varias hojas de estilos eres tú el que debe calcular el tamaño de la ventana y en función de este con Javascript cargar una u otra hoja de estilos. Eso ya no se lleva.

Además, la hoja de estilos ocupa poco y estará en la caché, no notarás su peso.

Donde puse Boilerplate quería poner Bootstrap

Gracias de nuevo.

Si te he entendido bien, realizas lo que se viene entendiendo como programación estructurada, pero llevado a las hojas de estilo, esto es, p.ej: fuentes en una hoja, botones en otra .... y dependiendo de lo que necesites en el fichero php, cargas una u otra utilizando includes ¿es eso? ¿es eso a lo que llamas "generar una hoja de estilo"?

No, creas una que sea reset.css, botones.css (o con la extensión que sea si usas less o Sass), tipografía.css, formularios.css, si usas preprocesadores también podrías tener variables, colores, etc., además tendrías 320.css, 480.css, 720.css, etc. Y todo ello se llama desde un estilos.css que contiene a todos los demás.

La única razon de crearlos por separado es la facilidad para encontrar qué modificar y dónde, pero al final solo usas un fichero CSS. Necesitarás usar una aplicación que te vaya generando el CSS final si no quieres andar cortando y pegando. Cuando detecta cambios en uno de los ficheros actualiza el "estilos.css" (por ejemplo).

En definitiva, lo hagas como lo hagas sólo usas un solo archivo css. La única excepción es que dentro de la web haya alguna parte muy distinta que no use el general como si por ejemplo tienes un blog y una tienda y son muy diferentes, entonces usarías uno para cada parte.

Mira, como ejemplo este es un fichero de bootstrap, el "botostrap.scss", a partir de el se genera el "bootstrap.css" que es el único que usa la web en cualquiera de sus páginas. Cada "include" llama a un "scss" o "css":

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset
@import "bootstrap/normalize";
@import "bootstrap/print";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Lo miraré con más detenimiento. Pero por lo pronto opino que es hacer lo mismo de manera diferente (más "complicado"), me refiero de la manera tradicional, trabajas con un único fichero, que dependiendo de cómo lo tengas estructurado tambien cumple su función, por lo que me dices (en el sistema "bootstrap", puedes tener ficheros para cada tamaño ... vamos lo mismo que tengo yo en hoja_estilo_800.css hoja_estilo_1024.css ... Pero a la hora de la verdad eso no es hacer de manera automática lo que yo quisiera, yo quisiera mediante un único código tener para todas las resoluciones sin necesidad de cambiar de fichero, o tener varios ficheros ... por eso mi duda, en si trabajar con unidades "px" "pt" "em" ... ya que yo siempre utilizo px, y mediante ese sistema lo que en 1024 se ve bien en 800 se ve enorme. Lo que me dices es que tenga un fichero para cada resolución, eso ya lo sabia yo, yo quisiera, lo que he comentado más arriba algún sistema, que automaticamente adapte el tamaño de fuente o de la imagen al del tamaño de la pantalla que tenga ese momento ...

No me he expresado bien. Solo tienes que tener un fichero de CSS, sólo uno. En el defines todas las resoluciones y como debe comportarse en cada una de ellas. Otra cosa es como trabajes para llegar a tener ese fichero, escribiendo todo el código directamente en él o haciéndolo en varios y luego incluyéndolos (con includes) en ese único fichero.

Usa siempre para diseñar (siempre que se pueda y practicamente será siempre) porcentajes (para anchos de contenedores) y em (para tamaño de letra) en lugar de píxeles.

Así todo, deberás cambiar de tamaño en algunas ocasiones el tamaño de la tipografía en función del tamaño de la pantalla, sobre todo en títulos. Pero tanto para resoluciones grandes como pequeñas (móvil) el tamaño de un 1 em o 16 px es el edecuado para que sea una lectura agradable. Así como no poner botones de menos de 40x40 por ejemplo.

Con "em" se adaptará el tamaño de la letra en función del porcentaje del tamaño de la fuente del contenedor padre. Si pones en el body un font-size del 100% 1 em = 16px, puedes poner un título de 1.4em y un texto pequeño de .7em. Eso te dará unos valores del 140% de 16px para el Título o sea 22px y de 11 para el texto pequeño.

Si ahora pones:

body{
font-size=100%;
}
.titulo{font-size:1.4em}
.letrapequena{font-size:.7em}
............... más css
@media only screen and (max-width:700px){
body{ 
font-size=80%;}
}

Para resoluciones de menos de 700px el texto tendrá el 80% de 16px, o sea 13px, y el título 18px y el texto pequeño 9px.

Si lo hubieras dedinido todo en pixeles deberías para cada resolución volver a definir el tamaño de texto de cada uno de los elementos en vez de poder modificar solo el tamaño en general.

Incluso si tienes algo como:

<div class="letragrande"><span class="texto">Letra grande</span></div>

<div class="letrapequena"><span class="texto">Letra Pequeña</span></div>

Y defines:

body{font-size:100%;}

.texto{font-size:1em;}

.letrapequena{font-size:80%;}

El tamaño de "Letra Grande" será de 16px y el de "Letra Pequeña" de 13px

Pero si defines .texto{12px} valdrá 12px en los dos.

Interesante, ahora si que me convences ...  con el siguiente código:

body{
font-size=100%;
}
.titulo{font-size:1.4em}
.letrapequena{font-size:.7em}
............... más css
@media only screen and (max-width:700px){
body{ 
font-size=80%;}
}

.. entiendo que, para pantallas menores de 700pixeles, el tamaño "base" de la fuente es del 80% (de 16px). El resto de css no se modifica (.titulo y .letra pequeña) ya que indican el  tamaño en función del tamaño base, así pues para la letra pequeña será el 70% del 80% de 16px ¿correcto?

Si es así, creo que para las siguientes versiones, lo empezará a utilizar...

Gracias de nuevo.

Correcto. Siento no habérlo explicado con claridad anteriormente ;)

Hola, para hacer pruebas, he realizado el siguiente código:

@media only screen and (max-width:1980px){
body{ 
font-size:50%;}
}
a{
    font-size:1em;font-family: Verdana;text-decoration: none;color:grey;cursor:default;line-height: 18px;
}

He puesto 1980 para abarcar el tamaño de mi pantalla. Pongo el tamaño del body (la fuente) a 50%, según lo que me has dicho sería el equivalente para 8px, y la fuente de los enlaces lo dejo a 1em, deduzco que sería tamaño 8px.

Para ver si funciona, luego modifico el 50% del body (su fuente) poniendolo al 100%, pero manteniendo el 1em del enlace, de esta manera al volver a ejecutar la página debería verse el enlace con tamaño 16px ... pero no lo hace ...

¿qué pasa?

Ya te dije que no era una respuesta para responder con unas pocas palabras.

Supongo que en el html tendrás el viewport (meta) puesto. De todas formas la verás siempre a ese tamaño porque es tu resolución máxima, y siempre estarás en una pantalla igual o menor a 1980px. Si hace la prueba con 1200px por ejemplo, verás el cambio si vas agrandando la ventana del navegador. En cuanto pase de 1200px su tamaño la letra aumentará a 16px si en el body principal tnías el 100%.

body {
    font-size: 100%;
}
a {
        font-size: 1em;
}
@media (max-width:1200px){
    body{
        font-size:50%;}
        }
}

Hasta tamaños de pantalla de 1200px el tamaño de la fuente es del 50%, cuando lo tengas a pantalla completa será de 16px.

Tengo puesto:

    <link type="text/css" href="hojaEstiloFF.css" media="screen"  rel="stylesheet">

lo mismo que tenía antes, solo he añadido el "medio='screen'" ... pero no me funciona haciendo el ejemplo que te he puesto más arriba ... y cambiando el ancho y agrandando el navegador o disminuyéndolo tampoco ...

Solo funciona modificando directamente en <a> el font-size, pero cuando cambio el font-size de porcentaje no cambia nada al refrescar la pantalla, para la misma resolución ...

Prueba con este HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css.css">
    <meta name="viewport" content="width=device-width">
    <title></title>
</head>
<body>
Hola<br>
<a href="">Hola</a>
</body>
</html>

Verás que al modificar el tamaño de la ventana del navegador cambia el tamaño de la letra al pasar de 1200px de ancho

Si, es cierto, con tu ejemplo funciona.

Poniendo incluso el meta en mi proyecto no funciona, y estoy haciendo las mismas pruebas ... Tendré que revisar el código ...

Gracias.

Hola. Ya revisé el código, resulta que soy "aficionado" a mediante javascript poner el valor de las propiedades, y claro, establecia el alto en otra parte del código.

Me resulta bastante interesante todo lo que me has comentadi. Tengo un tema que no sé si es posible, me ha parecido ver algo por ahí pero no termino de localizarlo. Todos los valores que se establecen en la hoja de estilos son "fijos", osea, estableces o bien el porcentaje o su valor ... , refiriendome a altura ... pero me gustaria saber si hay alguna manera de "insertar" variables en un css, te pongo un ejemplo de lo que quisiera, como me gustaria que fuese:

.capa_datos { min-height: screen.availHeight; }

Vamos, que la altura mínima sea la del alto de la pantalla, así si hay algun elemento que crece pues que crezca tambien ... Ya digo no sé si se puede hacer o si lo debo hacer como siempre, mediante script de javascript.

Saludos y gracias.

¿Has pensado en usar diseño responsivo?

Existen Front-Ends ya diseñados que hacen este trabajo y son 100% personalizables y 100% adaptables a las aplicaciones web.

Tienes el caso de bootstrap 3 que es totalmente LIBRE y puedes utilizarlo a sus anchas.

Con estos back-ends ya tienes el 50% del trabajo hecho y orientado a diferentes resoluciones desde 320x480 hasta 1920x900 y superiores

yo utilizo el view port. mira este artículo: http://css-tricks.com/viewport-sized-typography/