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
felino Lubuntu 18.04 Requisiti per applicazione console .net core 7.0 Linux e Software 0
M pulsante per aprire una maschera che contiene controllo schede MS Access 0
E Aiuto per query PHP 8
E Il punto di riferimento italiano per Trailers cavalli Discussioni Varie 0
F CERCO Servizi SEO di Qualità per Agenzie di Servizi SEO e Posizionamento 3
D Miglior modo per estrarre le occorrenze di un elemento in un set di più file xml e quindi scrivere il risultato in una tabella Excel o magari in JSON XML 0
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
R Plugin di base per WordPress WordPress 0
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
M Analisi sito per pulire codice inutile HTML e CSS 1
Paolo69 Risolto reCAPTCHA v2 per ASP Classic ASP 0
M Hosting VPS per server di gioco Minecraft Hosting 0
N Grazie per il benvenuto Presentati al Forum 0
Lino80 [Retribuito] Cerco programmatore php per modifica/inserimento funzione/valori da un plugin importer wordpress Offerte e Richieste di Lavoro e/o Collaborazione 0
R Filtri e plugin per photoshop Photoshop 0
AkTaRuS DIsabilitare il tasto destro tranne che per code e pre Javascript 1
0 [Retribuito] Cercasi programmatore per GdR PbC Offerte e Richieste di Lavoro e/o Collaborazione 0
A Adempimenti per magazine on line Leggi, Normative e Fisco 0
R Recupero di permalink di un sito che è stato eliminato per errore WordPress 5
I aiuto urgente per thunderbird Posta Elettronica 0
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
M [Cerco][Gratuito] Artista/designer per creazione grafica gioco di società Offerte e Richieste di Lavoro e/o Collaborazione 0
M Un saluto per cominciare Presentati al Forum 1
N MAX() + ADD_DATE - per update su Mysql MySQL 0
G Qualcuno conosce questo software per gestire le telecamere IP Cam e Videosorveglianza 0
A [CERCO] Articolista per siti a tema eventi e feste private Offerte e Richieste di Lavoro e/o Collaborazione 0
F Applicazione PHP/MySQL per prenotazioni: limitare il numero massimo di posti prenotabili PHP 20
I aiuto per outlook Posta Elettronica 0
L Script per convertire numeri in parole Javascript 2
J [Cerco] [Collaborazione gratuita] Grafico per piccoli lavori di grafica Offerte e Richieste di Lavoro e/o Collaborazione 0
M Memorizzazione temi per le diverse pagine del sito Javascript 1
otto9due Proteggere file caricati dall'esterno ma renderli accessibili per gli utenti loggati. PHP 4

Discussioni simili