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