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;
}