Aporte siencilla y PRACTICA herramienta para el desarrollo responsive

bowiecamaleon · #1 (**permalink**) 29/10/2013, 13:27

Esta es una sencilla herramienta a la hora de estar maquetando una pagina web, no importa para que framework estemos usando, es util, te dice cuales son las medidas exactas de tu pantalla (Horizontalmente) lo muestra en pixeles y en em's, este ultimo se configura dependiendo de que tamaño de letra uno le ponga al body en fuente, es muy sencillo y ligero, usa pocas imagenes, cuestion de extetica y contraste, usa la libreria de jquery, yo la baje y la enlace en el mismo archivo, por si uno llega a trabajar sin internet

Este es el codigo html

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Medidas PX &amp; EM </title>
<script type="text/javascript" src="js/jquery.js"/></script>
<script type="text/javascript" src="js/medida.js"/></script>

<link href="css/medida.css" rel="stylesheet" type="text/css">

</head>
<body>
<section class="ancho-px"></section>
<section class="ancho-em"></section>
<section class="soy"></section>


</body>
</html>

El codigo CSS

Código:

/* #Reset CSS (Inspired by E. Meyers)
================================================== */
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
  body {
    line-height: 1; }
  ol, ul {
    list-style: none; }
  blockquote, q {
    quotes: none; }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none; }
  table {
    border-collapse: collapse;
    border-spacing: 0; }

/* Body
================================================== */	
  body{
  	background-color: #B4C3C8;
    background: url(../img/bg_body.jpg);
  	font-size: 16px;
  }

/* .ancho-px
================================================== */	
  .ancho-px{
    height: 15px;
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
    color: #00A1EE;
    background: url(../img/blue-width-left.png) no-repeat 0 0,
    url(../img/blue-width-right.png) no-repeat 100% 0,
    url(../img/blue-width-middle.png) repeat-x 0 0,
    rgba(244,244,244,0.5);
    padding-bottom:0.88em;
  }

/* .ancho-em
================================================== */
  .ancho-em{
    height: 15px;
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
    color: #00A1EE;
    background: url(../img/blue-width-left.png) no-repeat 0 0,
    url(../img/blue-width-right.png) no-repeat 100% 0,
    url(../img/blue-width-middle.png) repeat-x 0 0,
    rgba(244,244,244,0.5);
    padding-bottom:0.88em;
  }

/* .ancho-em
================================================== */
  .soy{
    height: 20px;
    width: 160px;
    text-align: center;
    margin: 25px auto 10px;
    padding-top: 10px;
    color: #00A1EE;
    background: rgba(244,244,244,0.5);
    padding-bottom:0.88em;
    -o-border-radius: 26px;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    border-radius: 26px;
  }


/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {
    
  }
  
  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    
  }

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
    
    }
    
  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    
    }

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
    
    }

Y este es el codigo jquery

Código:

// Ajuste de ancho inicial en PIXELES
$(document).ready(function() {
	$('.ancho-px').text($('.ancho-px').width()+'px');
	});

//Encontrar el ancho de cambio de tamaño en PIXELES
$(window).resize(function() {
    $('.ancho-px').text($('.ancho-px').width()+'px');
	});



// Ajuste de ancho inicial en EM'S
$(document).ready(function() {
  $('.ancho-em').text($('.ancho-em').width()/16+'em');
  });


//Encontrar el ancho de cambio de tamaño EM'S
$(window).resize(function() {
    $('.ancho-em').text($('.ancho-em').width()/16+'em');
  });

/*===========================================================================
	
	1.- max-width: 959px 						= Por debajo de 959px
	2.- min-width: 768px and max-width: 959px 	= Mayor de 768 debajo de 959
	3.- max-width: 767px						= Por debajo de 767
	4.- min-width: 480px and max-width: 767px	= Mayor a 450 menor a 768
	5.- max-width: 479px						= Por debajo de 479

===========================================================================*/

$(document).ready(function() {
	var width = $(window).width();
    
    if( width >= 768 && width <= 959 ) {
            
            $('.soy').text('code for tablet view');

    } else if( width >= 480 && width <= 767 ) {
            
            $('.soy').text('code for mobile landscape');

    } else if( width <= 479 ) {
            
            $('.soy').text('code for mobile portrait');

     }

});

$(window).resize(function() {
	var width = $(window).width();
    
    if( width >= 768 && width <= 959 ) {
            
            $('.soy').text('code for tablet view');
            
    } else if( width >= 480 && width <= 767 ) {
            
            $('.soy').text('code for mobile landscape');
            
    } else if( width <= 479 ) {
            
            $('.soy').text('code for mobile portrait');
            
     }

});

Nota: es muy importante bajar la libreria jquery por si se quiere trabajar sin internet.

bowiecamaleon · #2 (**permalink**) 29/10/2013, 13:35

Las imagenes que uso es un sencillo fondo (claro) una transparencia y unas flechas que que simulan acotaciones

si alguien ve un error, o lo puede hacer mas practico, con gusto comparta

aqui pongo las imagenes

[URL="http://www.4shared.com/rar/SF39g5ov/img_medidas.html"]Imagenes[/URL]

pzin · #3 (**permalink**) 29/10/2013, 13:39

Yo me hice esto en CoffeeScript hace un tiempo:

Código Javascript:

Ver original$("body").append "<div id=\"rwd_info\"></div>"
$("#rwd_info").append $("body").width()
$(window).resize ->
  $("#rwd_info").empty().append $("body").width()

Y luego un poco de CSS (Sass):

Código CSS:

Ver original#rwd_info
  position: fixed
  bottom: 0
  right: 0
  padding: 5px
  background: rgba($yellow,.5)
  z-index: 1000
  color: $black
  border-radius: 5px 0 0 0
  font: 100 1em Monaco