jQuery browserSizr

Your flexible fixed layout / Tu estructura fija, flexible

Selecciona tu idioma / Select your language:⌗

EN

Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS reseter.

With jQuery browserSizr you’ll have more control over CSS styles when there is a significant change in browser size. It has 4 of the most common screens width:

browserSizr: 4kb

  • smartphones (310px or less)
  • less than 1024px (from 311px to 1023px)
  • greater than 1024px (from 1024px to 1279px – including 1024px)
  • greater than 1280px (from 1280px and higher – including 1280px)

Specifically, browserSizr detects the current width of your browser or it’s resize and injects a specific class when it is in the range you’ve activated. Through CSS and a bit of specificity, you can define what happens when the browser is in each resolution: 

#container {
   width: 960px; <span class="commentcss">/* normal width */</span>
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; <span class="commentcss">/* width for less than 1024px */</span>
      font-size: 12px; <span class="commentcss">/* smaller font-size */</span>
   }
   #container.over1280 {
      width: 1200px; <span class="commentcss">/* width for over 1280px */</span>
      font-size: 16px; <span class="commentcss">/* bigger font-size */</span>
   }

See example

Configuration:

  • Include the jQuery library and this humble plugin: 
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.browserSizr.js" type="text/javascript"></script>
  • Inicialize-it with the default parameters: 
$(function(){
   $().browserSizr();
});
  • Or configure it as preferred 
$().browserSizr({
   containerDiv: '#container',
   <span class="commentjs">//containerDiv - value: any HTML tag or #id, default to #container</span>
   debug: 'off',
   <span class="commentjs">//debug-  value: on | off, default to 'off'</span>
   smartphones: 'off',
   <span class="commentjs">//smartphones - value: on | off, default to 'off'</span>
   lower1024: 'on',
   <span class="commentjs">//lower1024 - value: on | off, default to 'on'</span>
   over1024: 'on',
   <span class="commentjs">//over1024 - value: on | off, default to 'on'</span>
   over1280: 'off'
   <span class="commentjs">//over1280 - value: on | off, default to 'off'</span>
});

ES

Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores. Con un layout fijo esto no debería ocurrir ya que tienes más control sobra la estructura misma y el modelo de caja se comporta como esperas si haces uso de un buen reseter de estilos CSS.

Con jQuery browserSizr podrás tener más control sobre los estilos CSS cuando existe una variación significativa la dimensión del browser: en cuántos pixeles quedaría el tamaño de la tipografía del menú a 1280x1024px, o que las imágenes queden a 80% de su tamaño en resoluciones de 800x600px por ejemplo. Tienes los 4 anchos de pantallas más comunes:

browserSizr: 4kb

  • smartphones (310px o menos)
  • menor que 1024px (de 311px a 1023px)
  • mayor que 1024px (de 1024px a 1279px – incluye 1024px)
  • mayor que 1280px (de 1280px o más – incluye 1280px)

En específico, browserSizr detecta el actual ancho del navegador ó su redimensionado e inyecta una class específica cuando se encuentra en el rango que hayas activado. A través de CSS y un poco de especificidad, puedes definir qué quieres que ocurra cuando el browser se encuentre en cada resolución: 

#container {
   width: 960px; <span class="commentcss">/* ancho normal del sitio web */</span>
   font-size: 14px;
}
   #container.lower1024 {
      width: 740px; <span class="commentcss">/* ancho para resoluciones menores que 1024px */</span>
      font-size: 12px; <span class="commentcss">/* menor tamaño de fuente */</span>
   }
   #container.over1280 {
      width: 1200px; <span class="commentcss">/* ancho para resoluciones mayores que 1280px */</span>
      font-size: 16px; <span class="commentcss">/* mayor tamaño de fuente */</span>
   }

Ver ejemplo

Configuración:

  • Incluye la librería jQuery y luego, este humilde plugin: 
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.browserSizr.js" type="text/javascript"></script>
  • Inicialízalo con los parámetros por defecto: 
$(function(){
   $().browserSizr();
});
  • O configúralo como más prefieras: 
$().browserSizr({
   containerDiv: '#container',
   <span class="commentjs">//containerDiv - id o etiqueta donde se inyectará la class</span>
   debug: 'off',
   <span class="commentjs">//debug - ventana debug on | off, por defecto off</span>
   smartphones: 'off',
   <span class="commentjs"> //smartphones - valores: on | off, por defecto 'off'</span>
   lower1024: 'on',
   <span class="commentjs"> // valores: on | off, por defecto 'on'</span>
   over1024: 'on',
   <span class="commentjs"> //over1024 - valores: on | off, por defecto 'on'</span>
   over1280: 'off'
   <span class="commentjs"> //over1280 - valores: on | off, por defecto 'off'</span>
});

[Bajar/Download plugin (.zip 1kb)][1]{.bajar}

[Bajar/Download plugin+demos (.zip 22kb)][2]{.bajar}

browserSizr logo by toledopasarin

Little extension as Jorge Sousa required, now it detects just the height of the browser window within 2 values: less than 600px and over 600px.

Pequeña extensión como solicitada por Jorge Sousa, donde ahora detecta sólo el alto de la ventana dentro de 2 rangos: menor que 600px y mayor a 600px.

[Ver Ejemplo Alto Ventana][3]{.verejemplo}

[Bajar/Download plugin + demo (.zip 24kb)][4]{.bajar}

[1]: http://www.csslab.cl/downloads/jQuery+browserSizr “Enlace en CSSLab a “Bajar/Download browserSizr Plugin”” [2]: http://www.csslab.cl/wp-content/uploads/2009/07/browsersizr-08.zip “Enlace en CSSLab a “Bajar/Download browserSizr Plugin+demos”” [3]: http://www.csslab.cl/ejemplos/browserSizr/browsersizr-081/ “Enlace en CSSLab a “Ver ejemplo browserSizr Height”” [4]: http://www.csslab.cl/downloads/jQuery+BrowserSizr+Extended “Enlace en CSSLab a “Bajar/Download browserSizr Extended Height””