website per mobile/tablet/desktop

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Salve,

Sto sviluppando per un progetto un sito che deve avere le seguenti caratteristiche:
deve essere responsive per 3 devices usando le media queries -> Compatibilita con mobile/tablet/desktop.
Di seguito quello che ho prodotto fino ora è vorrei ricevere degli esempi su come implementare le media queries per quello che vi mostro per i tre devices.
L'idea è che deve essere un sito one page.
Grazie dei consigli.

HTML:
<!doctype html>
<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<title>ProjectM8</title>
	<link rel="stylesheet" href="responsivedesign.css">
	
	<script src="jquery-1.11.0.js"></script>
	<script src="jquery-2.1.0.js"></script>
	</head>
	<body> 
		<header> <!--HEADER Top of page-->
			<h1>HEADER</h1>
		</header> <!-- END -->
		<nav><!--NAVIGATION-->
			<ul>
				<li><a href="#box1">BOX 1</a></li>
				<li><a href="#box2">BOX 2</a></li>
				<li><a href="#box3">BOX 3</a></li>
				<li><a href="#box4">BOX 4</a></li>
			</ul> 
		</nav> <!--END-->
		<div id="page-wrap"><!-- WRAP start -->
			<div id="box1">
				<a name="box1"></a>
				<div class="page-padding"></div>
				<p>BOX 1</p>
		</div> <!--END page1-->
	
		<div id="box2">
			<a name="box2"></a>
			<div class="page-padding"></div>
			<p>BOX 2</p>
		</div> <!--END page2-->

		<div id="box3">
			<a name="box3"></a> 
			<div class="page-padding"></div>
			<p>BOX 3</p>
		</div> <!--END page3-->	
		<div id="box4">
			<a name="box4"></a> 
			<div class="page-padding"></div>
			<p>BOX 4</p>
		</div> <!--END page3-->	
		<div id='toTop'>To The Top!</div>
		<div class="push"></div>
		</div><!-- END wrap-->
		<footer> <!-- BOTTOM of the site-->
			<h1>FOOTER</h1>
		</footer> <!-- END -->
		<script> /*JAVASCRIPT for smooth scrolling*/
		$(document).ready(function() {
			function filterPath(string) {
				return string
				.replace(/^\//,'')  
				.replace(/(index|default).[a-zA-Z]{3,4}$/,'')  
				.replace(/\/$/,'');
				}
				$('a[href*=#]').each(function() {
					if ( filterPath(location.pathname) == filterPath(this.pathname)
					&& location.hostname == this.hostname
					&& this.hash.replace(/#/,'') ) {
						var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
						var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
						if ($target) {
							var targetOffset = $target.offset().top;
							$(this).click(function() {
								$('html, body').animate({scrollTop: targetOffset}, 2000);//Smooth speed
           return false;
         });
      }
    }
  });
});
	</script> <!-- END script 1 -->
	<script> /*JAVASCRIPT for sticky navbar effect on top when scrolling down*/
		$(function(){
				var
    $win = $(window),
    $filter = $('nav'),
    $filterSpacer = $('<div />', {
      "class": "filter-drop-spacer",
      "height": $filter.outerHeight()
    });
	$win.scroll(function(){     
    if(!$filter.hasClass('fix') && $win.scrollTop() > $filter.offset().top){
      $filter.before($filterSpacer);
      $filter.addClass("fix");
    } else if ($filter.hasClass('fix')  && $win.scrollTop() < $filterSpacer.offset().top){
      $filter.removeClass("fix");
      $filterSpacer.remove();
    }
  });
});
	</script> <!-- END -->
	<script>
		$(document).ready(function(){
	
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 20) {
			$('#toTop').fadeIn();
		} else {
			$('#toTop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('#toTop').click(function(){
		$('html, body').animate({scrollTop : 0},500);
		return false;
	});
	
});
	</script> 
	</body> 
</html>

Codice:
 *{ margin: 0 auto;}


body {
	background:white; 
	margin: 0 auto; 
	height:2000px;
	}

header {
	position:relative;
	top:0px;
	left:0px;
	background:#666; 
	height:70px; 
	width:100%;
	}

nav {
	position: relative;
	left:0;
	top:0;
	word-spacing:10px;
	background-color: black;
	width: 100%;
}
.fix {
  position: fixed;
}
	
#box1 {
	height:1100px;
	width:1000px;
	background:#afc9ff;
	padding-top:110px;
	}
	
#box2 {
	height:1100px;
	width:1000px;
	background:#777cdc;
	padding-top:150px;
	}
	
#box3 {
	height:1100px;
	width:1000px;
	background:#9b70c0;
	padding-top:150px;
	}
#box4 {
	height:1100px;
	width:1000px;
	background:#7c1685;
	padding-top:150px;
	}

	
.page-padding {height:90px; width:100%;}

ul li {
	list-style: none;
	display: inline-block;
}

a { color:white; text-decoration:none;}
	
a:hover { text-decoration:underline;}

footer, .push {
	clear: both;
	width: 100%;
	background-color: olive;
	height: auto;
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
Beppe2 Website x5 E-Commerce 1
P modifica colore A Hover link website . WordPress 2
D Website online booking widget! Presentati al Forum 1
TheWhiteRabbit Perfezionare ricerca in PHP - NO DATABASE - (Website X5) PHP 5
I Domanda su Wix (Flash Website Builder) Flash 0
J Simply Button v2: Super Cool-Sexy Button for Your Website Javascript 0
T Website, Download Online Javascript 3
R Website in flash.. come impostarlo? Flash 0
H Problema invio e-mail in WebSite X5 Posta Elettronica 0
T Website Review .. freinds!! Presenta il tuo Sito 0
F Freelancewebmarket. Please review my website Presenta il tuo Sito 0
M Mysticlady Website Presenta il tuo Sito 0
T Let Me Link To Your Website SEO e Posizionamento 0
F My website Presenta il tuo Sito 1
artimoderne Vi presento il mio website.. Presenta il tuo Sito 19
K About Website Design. Presenta il tuo Sito 3
I --Io-- WebSite Presenta il tuo Sito 0
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
P Aiuto per rendere un Bot Telegram Privato PHP 0
V Query per una somma PHP 2
A Tabella con bottoni per aggiornamento record PHP 6
G Consigli SEO per scrittura e struttura pagine SEO e Posizionamento 5
P Passare solo alcuni parametri a script per CSV PHP 0
A Consiglio per creazione sito web CMS (Content Management System) 0
A Regex per isolare link interni con rel noopener PHP 0
L form immagini per il database PHP 0
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 1
I [cerchiamo][retribuito] Grafico/a per stickers Offerte e Richieste di Lavoro e/o Collaborazione 0
R Cercarsi programmatore per GDR PBC Offerte e Richieste di Lavoro e/o Collaborazione 0
L Sessione e array per utenti PHP 0
A Sottoquery con group by per mese MySQL 0
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
V [Cerco] Socio e Sviluppatore per App PlacesFinder Offerte e Richieste di Lavoro e/o Collaborazione 0
M user agent per il download di api PHP 0
B Stringa sql per ricerca su più campi Database 1
Cosina Upload multiplo con invio allegati per email PHP 0
P Editor per la realizzazione di siti HTML e CSS 0
M Versione nativa per M1. Photoshop 1
A Aiuto per pagina php PHP 0
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
T [cerco] scrittore/scrittrice per articoli web Offerte e Richieste di Lavoro e/o Collaborazione 5
L Interfaccia grafica per gestire sql server .NET Framework 1
B javascript per problemi con pdf e Safari Javascript 0
R Plugin per Gestire videocorsi a pagamento WordPress 3
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
C media per riga MySQL 1
I Cerca: blogger IT per articoli di prova Offerte e Richieste di Lavoro e/o Collaborazione 0
R Plugin per Registrazione Utente e Pagamento prodotto WordPress 2
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
D modificare questo codice per inserimento in text e non in tabella jQuery 1

Discussioni simili