Ridimensionamento dei font al ridimensionamento del browser e/o della risoluz monitor

peter-oz · 21 Nov 2012

Ciao,
scrivo perchè ho un problema con la costruzione della mia pagina web.
In pratica vorrei avere la possibilità di raggiungere questo risultato(http://www.microsoft.com/it-it/default.aspx)ma mi accontenterei anche di qualcosa in meno.Mi piacerebbe che alla riduzione/espansione della finestra del browser e/o al variare della risoluzione del monitor,il contenuto della mia pagina si riduca/ingrandisca in modo proporzionale.Ho provato utilizzando le indicazioni fornite da questa guida (http://www.html.it/articoli/stabili...-e-soluzioni-3/)ma non sono stato in grado di risolvere il problema.
Ho seguito le impostazioni per la realizzazione di un layout liquido,impostando il font-size sia in "%" che in "em",ho impostato all'inizio del mio codice CSS l'impostazione *{margin0;padding:0;} dopo di che ho assegnato all' interno del body il valore font-size in tutti i modi e combinandolo con il valore font-size di h1[per tutti i modi intendo combinazioni tra px(solo nel body) % ed em].
Ho notato questa cosa su questo sito http://biccari.altervista.org/c/inf...ito/hosting.php.
Dopo ho provato con jQuery (http://cbavota.bitbucket.org/widetext/) e non sono in grado di farla funzionare.
Per completezza vi copio i codici che compongono la mia pagina e, sperando che qualcuno più pratico di me(non so na mazza) possa trovare una soluzione ad un problema che mi blocca da ormai 5 giorni,vi saluto.

HTML

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Personal Webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="cssmodello.css" rel="stylesheet" type="text/css" media="screen" />
<script src="fixedbackground.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="libjQuery.js" type="text/javascript"></script>
<script src="jQuery.wideText.js" type="text/javascript"></script>
</head>

<body onload="fixedBackground('imagini%20per%20home/logo3.gif');">
<div id="container">
<div id="header">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200em" height="120.5em" align="top" id="FlashID" title="logo">
        <param name="movie" value="logo sicuro.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="11.0.0.0" />
        <!-- Questo tag param fa in modo che agli utenti con Flash Player 6.0 r65 e versioni successive venga richiesto di scaricare l'ultima versione di Flash Player. Eliminatelo se non volete visualizzare la richiesta agli utenti. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <param name="BGCOLOR" value="#FFFFFF" />
        <!-- Il tag object successivo è per i browser diversi da IE. Utilizzate IECC per nasconderlo in IE. -->
        <!--[if !IE]>-->
        <object data="logo sicuro.swf" type="application/x-shockwave-flash" width="15%" height="96%" align="top">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="11.0.0.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <param name="BGCOLOR" value="#FFFFFF" />
          <!-- Il browser visualizza il seguente contenuto alternativo per gli utenti che utilizzano Flash Player 6.0 e versioni precedenti. -->
          <div>
            <h4>Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Scarica Adobe Flash Player" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->  
</object> 
    <h1>
    <span class="responsive wtext" style="font-size: 90.574px; visibility: visible;">Riduciti xfavore</span></h1>
  <h2>Personal<br />Website</h2> 
      	
            	<div id="nav">
                	<ul id="menu">
                    	<li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
					<div id="main">
                    </div>
<div id="footer">
</div>
     

</div>    
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<script type="text/javascript">
    $(window).load( function() {
    $( '.responsive' ).wideText();
    } );
</script>
</div>
</body>
</html>

JS fixedbackground.js

Codice:

  //--------------------------------------------------------------//
  // Full Window (stretched) Watermarked Background Image v2.0.1. //
  //--------------------------------------------------------------//
  //                                                              //
  //        Copyright (C) 2002-2004 QCS Systems Inc.              //
  //                                                              //
  //  This JavaScript can be used  with  permission as long as    //
  //  this message stays here in the header of the script. Any    //
  //  modifications and bug fixes are appreciated.                //
  //                                                              //
  //    Author : D.J.Oepkes                                       //
  //    Date   : 11/22/2002                                       //
  //    Email  : [email][email protected][/email]                           //
  //                                                              //
  //--------------------------------------------------------------//
  // Modifications                                                //
  //--------------------------------------------------------------//
  // 11/22/2004 D.J.Oepkes, Total rebuild as I finally found an   //
  //                        excellent way to do away with java-   //
  //                        script to position it. It's now all   //
  //                        done through CSS and an easy onload   //
  //                        function does all the layering work   //
  //--------------------------------------------------------------//
  // 01/12/2005 D.J.Oepkes, Removed one layer out the equation.   //
  //                        Also removed layer-position: fixed    //
  //                        to make flash work in firefox.        //
  //--------------------------------------------------------------//

  var backgroundset=false;   // do not change, for internal use only

  //--------------------------------------------------------------//
  // fixedBackground                                              //
  //--------------------------------------------------------------//
  // set the fixed background image. If Called for the first time //
  // it will set the necessary body styles, layers, and images to //
  // create the fixed background effect,  otherwise it will  just //
  // change the background image.                                 // 
  //                                                              //
  // Insert the following into the html to load the script        //
  //   <script src="fixedbackground.js"></script>                 //
  //                                                              //
  // 1) How to Use in body-tag (preferred):                       //
  //  <body onload="fixedBackground('background.jpg');">          //
  //                                                              //
  // 2) How to Use in link:                                       //
  //  <a href="javascript:fixedBackground('background.jpg');">    //
  //    Try this background...                                    //
  //  </a>                                                        //
  //                                                              //
  // 3) How to use in script:                                     //
  //  <script>                                                    //
  //    fixedBackground('background.jpg');                        //
  //  </script>                                                   //
  //--------------------------------------------------------------//

  function fixedBackground(url)
  {
    if(!backgroundset)
    {
      document.body.style.overflow = 'hidden';
      document.body.style.padding  = '0px';
      document.body.style.margin   = '0px';

      var overlay = document.createElement('DIV');
      overlay.style.position    = 'absolute';
      overlay.style.top         = '0px';
      overlay.style.left        = '0px';
      overlay.style.height      = '100%';
      overlay.style.width       = '100%';
      overlay.style.overflow    = 'auto';

      overlay.innerHTML         = document.body.innerHTML;
      document.body.innerHTML   = '<img id="background" height="100%"  width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0; top: 0; z-index: 0" />';

      document.body.appendChild(overlay);

      backgroundset=true;
    }
    else
      background.src=url;
  }

  //--------------------------------------------------------------//
  //---  Prelevato ed illustrato su [url]http://www.web-link.it[/url]  -----//

File libjQuery.js libreria jquery presa da http://code.jquery.com/jquery-1.8.3.js

jQuery.wideText.js dal sito http://cbavota.bitbucket.org/widetext/

Codice:

/**
 * jQuery.wideText
 * Version 1.0.1
 * Copyright (c) 2012 c.bavota - [url]http://bavotasan.com[/url]
 * Dual licensed under MIT and GPL.
 * Date: 10/04/2012
 **/

( function($) {
	$.fn.wideText = function() {
		return this.each( function() {
			// Add "wtext" class to each element and then set up the magic
			var obj = $(this),
				rtext = obj.addClass( 'wtext' );

			// Work that magic each time the browser is resized
			$(window).on( 'resize', function() {
				obj.css( { 'fontSize': parseInt( obj.css( 'fontSize' ) ) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
			} ).resize();
		});
	};
} )(jQuery);

CSS

Codice:

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
html, body {
	height:100%;	
}
html {
	background-image:url(imagini%20per%20home/sfondo.gif);
	background-repeat:repeat-x;
	background-size:contain;
	background-attachment:scroll;	
}
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
}
span, .responsive {
visibility: hidden;
} 
h1, .responsive {
line-height: 1.1;
} 
.responsive {
font-family: 'Ranchers', cursive;
text-transform: uppercase;
margin-bottom: 0;
} 
.wtext {
white-space: nowrap;
display: inline-block;
} 
#container {
	height:100%;
}
#header {
	height:12%;
		
}
#FlashID {
	height:100%;
}

Dove sbaglio?Perchè non funziona?
PS:Uso dreamweaver

Cerca

Cerca

Ridimensionamento dei font al ridimensionamento del browser e/o della risoluz monitor

peter-oz

Nuovo Utente

Discussioni simili