¿Cómo manejar una resolución de pantalla/tamaño de pantalla diferente al desarrollar un sitio?

Question

Me gustaría desarrollar un sitio usando jQuery que funcione con todos los principales navegadores. Pensé comenzar con un diseño básico (un encabezado, un par de pestañas con contenido y pie de página). Me pregunto cómo debería crear este diseño para admitir diferentes resoluciones de pantalla, tamaño de pantalla o tamaño de ventana. ¿Debería trabajar en píxeles/puntos/porcentajes al definir el ancho y la altura de los componentes? ¿Hay algún complemento de jQuery que pueda ayudarme con esta tarea? Gracias !

Answer 1

Existen varias soluciones a este problema, pero dependen principalmente del tipo de contenido que desea compartir a través del sitio (es decir, videos incrustados o imágenes que pueden tener un tamaño finito) y la apariencia usted está buscando.

Para diseños web que funcionan bien en varios navegadores y en una amplia gama de tamaños de ventana, debe consultar "Disposición líquida". A continuación hay algunos enlaces a tutoriales sobre estos diseños.

• Liquid layouts the easy way | Max Design
• Liquid CSS Layouts - Design Alternative to Table Based Websites
• Fixed Width Layouts Versus Liquid Layouts

También puede utilizar Javascript (jQuery incluidos) para modificar el estilo/contenido basado en la resolución de la ventana (por ejemplo, el cambio de una multi- diseño de columna a un diseño de una sola columna para pantallas más pequeñas, como teléfonos móviles). Esto se llama "Contenido adaptativo".

• Adaptive CSS-Layouts: New Era In Fluid Layouts?

Answer 2

Esta es algunas secuencias de comandos sencilla que he utilizado en el pasado (usando jQuery):

$(document).ready(function(){ 
$('body').append('<div id="screencss"></div>'); 
adjustCSS(); 
$(window).resize(function(){ adjustCSS() }); 
}) 
function adjustCSS(){ 
var pageWidth = $(window).width(); 
var sizeSelected = "css/blue-800.css"; 
if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; } 
if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; } 
if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; } 
$("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />'); 
} 

Los valores de ancho de página se utilizan en el código son arbitrarias y se pellizcada para trabajar con un sitio específico, así que siéntase libre de ajustarlos como desee.

Además, dentro de cada uno de esos archivos CSS hay solo una cantidad mínima de CSS que establece el ancho de los contenedores/contenedores principales e incluso la imagen de fondo.

---

Actualización n. ° 2: Si está intentando mantener un código HTML válido. A continuación, puede agregar todas las hojas de estilo CSS en la cabecera de la página (incluir un atributo de título en cada uno):

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" /> 

entonces utilizar este script. Puede obtener un destello de blanco si ha incluido imágenes de fondo en su CSS, así que asegúrese de establecer un estilo CSS base.

$(document).ready(function(){ 
$('body').append('<div id="screencss"></div>'); 
adjustCSS(); 
$(window).resize(function(){ adjustCSS() }); 
}) 
function adjustCSS(){ 
var pageWidth = $(window).width(); 
var sizeSelected = "blue1"; 
if (pageWidth > 510) { sizeSelected = "blue2"; } 
if (pageWidth > 580) { sizeSelected = "blue3"; } 
if (pageWidth > 900) { sizeSelected = "blue4"; } 
if (pageWidth > 1010) { sizeSelected = "blue5"; } 
if (pageWidth > 1420) { sizeSelected = "blue6"; } 
var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled'); 
$('head').find('link[title]').not(lnk).attr('disabled', 'disabled'); 
} 

Answer 3

jQuery no puede ayudarle a hacer esto. Tienes que aprender el HTML básico y CSS. Use Javascript y jQuery si lo necesita, no lo use solo para usarlo. Deberías trabajar con píxeles o porcentajes cuando se trata de dimensiones en la web. Los puntos son para imprimir. Los tamaños de fuente deben establecerse en EM o píxeles.

Un diseño fijo es el más común para páginas web normales, y al usar marcos de cuadrícula como 960gs, tiene una manera sencilla de hacer que las proporciones se vean decentes sin dejar de soportar la gran mayoría de las resoluciones de pantalla. También es mucho más fácil adaptar los gráficos a un diseño de ancho fijo y, al mismo tiempo, hacer que la página sea fácil de usar.

Tenga en cuenta cuando/si usa porcentajes que las líneas de texto de más de 600-800 píxeles son difíciles o lentas de leer. Tener un área de contenido de 80% podría ser una buena idea para una ventana de 1000px de ancho, pero si tienes una ventana gráfica de 1900px, el sitio queda inutilizable.

Y uno generalmente no establece explícitamente una altura en las cosas, ya que la altura aumentará automáticamente a medida que aumenta el contenido del contenedor. Por supuesto, puede establecer la altura en ciertas cosas, pero todo depende de qué, realmente.

Por lo tanto, usar un ancho dinámico o fijo todo depende de su contenido.

Answer 4

En función de sus necesidades descritas, le recomiendo consultar el archivo css "Grids" de la biblioteca de la interfaz de usuario de Yahoo (YUI), aquí puede encontrar el archivo más la documentación: http://developer.yahoo.com/yui/grids/.

La configuración básica del paquete de grillas incluye encabezado, cuerpo y pie de página. Puede eliminar el encabezado y/o el pie de página si lo desea. El cuerpo se puede dividir utilizando un modelo de cuadrícula anidado y se incluyen una variedad de plantillas.

Personalmente, comienzo todas las páginas HTML/CSS que hago con el archivo "reset-fonts-grids" combinado de YUI. Le proporciona un archivo de restablecimiento css de navegador cruzado, el archivo de cuadrículas y algunas clases estandarizadas para fuentes.