 Aporte siencilla y PRACTICA herramienta para el desarrollo responsive
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 & 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.
Última edición por bowiecamaleon; 29/10/2013 a las 13:29
Razón: ortografia
|