0
Я размещаю онлайн-сайт, но если я смотрю его со смартфона или маленького устройства, каждый элемент может выглядеть неточно! этот факт никогда не случался со мной. Зачем? В режиме ступенчатого я не могу просмотреть этот сайт в реагирующей режиме, чем я предполагаю, что это не проблема JS, но ошибка CSSОтсутствует отзывчивость в HTML5
body {
width: 100%;
margin: 0;
background: #fff;
}
a {
\t color: blue;
\t text-decoration: line-through;
}
p {
\t color: blue;
\t font-size: 14px;
\t font-family: 'Montserrat', sans-serif;
}
.white-contact {
\t background-color: #fff;
\t padding: 20px;
\t margin-top: 30px;
}
a:hover {
\t color: black;
\t text-decoration: underline;
}
h1 {
\t position: absolute;
z-index: 998 !important;
/* margin: 0 auto; */
width: 100%;
text-align: center;
height: 100vh;
line-height: 75vh;
font-size: 13em;
color: #fff;
font-family: 'Condiment', cursive;
}
h2 {
\t font-family: 'Montserrat', sans-serif;
\t font-size: 20px;
\t letter-spacing: 2px;
\t color: blue;
\t text-transform: uppercase;
\t text-decoration: line-through;
}
h2.last {
\t color: blue !important;
}
li {
\t list-style: none;
color: blue;
font-family: 'Montserrat', sans-serif;
margin-bottom: 2px;
}
ul.do {
\t padding-left: 0px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 2px;
color: blue;
}
h3.top-left {
\t position: fixed;
left: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
}
h3.top-right {
\t position: fixed;
right: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
text-align: right;
padding-right: 30px;
}
h3.bottom-left {
\t position: fixed;
z-index: 999;
padding-left: 30px;
bottom: 0px;
}
h3.bottom-right {
bottom: 0px;
position: fixed;
text-align: right;
padding-right: 30px;
z-index: 999;
width: 49%;
right: 0px;
}
.top {
}
.bottom {
}
a.social {
\t text-decoration: line-through;
}
a.social:hover {
\t text-decoration: underline;
\t color: yellow;
}
canvas#canv {
\t z-index: 1;
\t position: absolute;
}
.mekis-img {
\t width: 100%;
position: absolute;
z-index: 1;
text-align: center;
height: 100vh;
margin-top: 10%;
}
section{
\t margin-top: 50px;
}
section.top {
\t height: 100vh;
\t margin-top: 0px;
\t border-bottom: 1px solid blue;
}
section.second {
\t height: 100vh;
/* background-image: url('http://i.giphy.com/3oEdvcNIvJXteYUEXm.gif');*/
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
section.third {
\t height: 100vh;
\t background-image: url('http://i.giphy.com/Dc5JEeUuPosN2.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
section.last {
\t height: 100vh;
\t background-image: url('http://static2.blog.corriereobjects.it/seigradi/wp-content/blogs.dir/70/files/2013/02/div1.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.twitter {
\t text-align: center;
height: 100vh;
/* line-height: 50vh; */
font-size: 1em;
text-transform: uppercase;
font-weight: 900;
padding-top: 10%;
}
}
img.gif-second {
\t position: absolute;
right: 60px;
opacity: 0.8;
margin-top: -40%;
z-index: -1;
}
.container {
\t width: 90%;
\t margin:0 auto;
\t padding-left: 20px;
\t padding-right: 20px;
\t padding-top: 50px;
}<!doctype html>
\t
<!-- CSS -->
\t <title>Mekis | Official Website</title>
\t <head>
\t \t <meta http-equiv="content-type" content="text/html; charset=utf-8" />
\t \t <meta name="description" content="Mekis Official Website | Producer , Dj Brescia, Italy | Electro, Reggae, Dub, Drum and Bass, Big Beat | Electro vs Rock with Joao at Lio Bar, Road to Zion Electro Dub, Jungle Massive," />
\t \t <meta name="keywords" content="brescia dj, mekisdj, mekis, unnu can wid mi, drop 39, djset, electro, rock, dub, reggae, alternative, producer, electro vs rock, road to zion, sound design" />
\t \t <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
\t \t
\t \t <link rel='stylesheet' id='default-style-css' href='style.css' type='text/css' media='all' />
\t \t
\t \t <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js'></script>
\t \t <script type='text/javascript' src='viewport.js'></script>
\t \t <!-- FONTS -->
\t \t <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
\t \t <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
\t \t <link href='https://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
\t \t <!-- FONTS -->
\t
\t \t
\t \t
\t </head>
\t \t <body>
\t \t \t <section class="top">
\t \t \t <canvas id='canv'>
\t \t \t </canvas>
\t \t \t <div class="top">
\t \t \t <h3 class="top-left">Mekis/msdvc</h3>
\t \t \t <h3 class="top-right">Official Web</h3>
\t \t \t </div>
\t \t \t <audio loop autoplay>
\t \t \t <source src="http://static1.grsites.com/archive/sounds/vehicle/vehicle005.mp3" type="audio/mpeg">
\t \t \t </audio>
\t \t \t <div class="mekis-img">
\t \t \t <img src="img/mekis.png" alt="mekis">
\t \t \t </div>
\t \t \t <div="bottom">
\t \t \t <h3 class="bottom-left"><a class="social" href="https://www.facebook.com/mekisdj/" target="blank">Facebook</a></h3>
\t \t \t <h3 class="bottom-right"><a class="social" href="https://instagram.com/mekisdj/" target="blank">Instagram</a></h3>
\t \t \t </div>
\t \t \t </section>
\t \t \t <section class="second">
\t \t \t \t <div class="container">
\t \t \t \t <h2>Ciao! My name is Mekis.<br/>Everyday i do some works</h2>
\t \t \t \t <h3>What i do?</h3>
\t \t \t \t <ul class="do">
\t \t \t \t \t <li>President at <a href="http://www.cockroachintproduction.com" target="blank">Cockroach Int. Production</a></li>
\t \t \t \t \t <li>Music Production</li>
\t \t \t \t \t <li>Dj and Producer</li>
\t \t \t \t \t <li>Sound Designer</li>
\t \t \t \t \t <li>Professor for <a href="http://www.laba.edu/home/index.asp" target="blank">Laba</a> for Sound Design and Computer Graphic</li>
\t \t \t \t \t <li>Web at <a href="http://www.adoratorio.com" target="blank">Adoratorio Creative Collective</a></li>
\t \t \t \t </ul>
\t \t \t \t <p>-</p>
\t \t \t \t <h3>What i love</h3>
\t \t \t \t <ul class="do">
\t \t \t \t \t <li>Music and Sound FX</li>
\t \t \t \t \t <li>Reggae</li>
\t \t \t \t \t <li>Pizza with Salami</li>
\t \t \t \t \t <li>Friday Night</li>
\t \t \t \t </ul>
\t \t \t \t <p>-</p>
\t \t \t \t <h3>What i hate</h3>
\t \t \t \t <ul class="do">
\t \t \t \t \t <li>Conventional Design and Music Production</li>
\t \t \t \t \t <li>Mostarda</li>
\t \t \t \t </ul>
\t \t \t \t <!-- <img class="gif-second" src="img/mekis.png"> -->
\t \t \t \t </div>
\t \t \t </section>
\t \t \t <section class="third">
\t \t \t \t <!-- <div class="container">
\t \t \t \t <h2>I love Twitter</h2>
\t \t \t \t <div class="twitter">
\t \t \t \t \t <p class="twitter">tweet with me. hashtag <a href="https://twitter.com/search?q=%23msdvc&src=typd" target="blank">#mekisdj</a> (for music) or <a href="https://twitter.com/search?q=%23mekisdj&src=typd" target="blank">#msdvc</a> (for web)</p>
\t \t \t \t </div>
\t \t \t </div> -->
\t \t \t </section>
\t \t \t <section class="last">
\t \t \t \t <div class="container">
\t \t \t \t \t <h2 class="last">Ok. Say hello!</h2>
\t \t \t \t \t <div class="white-contact">
\t \t \t \t \t \t <h3>Send me email for booking</h3>
\t \t \t \t \t \t <p>Yes. I love Gmail<br/>
\t \t \t \t \t \t \t massimo.devicienti[at]gmail.com<p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="white-contact">
\t \t \t \t \t \t <h3>Press Kit</h3>
\t \t \t \t \t \t <p>Do you want more info about my projects?<br/>
\t \t \t \t \t \t \t click and download my press kit<p><br/>
\t \t \t \t \t \t \t <small>in coming</small>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </section>
\t \t \t <!--
\t \t \t Variation of Screwed:
\t \t \t http://codepen.io/tmrDevelops/pen/xwBYvN
\t \t \t !-->
\t \t </body>
\t \t <script type='text/javascript' src='script.js'></script>
\t \t <!--<script type='text/javascript' src='preloader.js'></script>-->
\t \t
</html>ссылка на сайт enter link description here
Там нет никакой магии с адаптивным дизайном, что вам нужно сделать, используя рамки, такие как Bootstrap, Framework 7 или что-то любит, или сделать это самостоятельно с помощью медиа-запросов. – Patrick
Начните с добавления META TAG Viewport, как указано в ответах, и добавьте медиа-запросы для определенных устройств. Это должно привести вас к правильному пути https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Chris