0
Ich habe eine Website hier: RedstoneGaming und wie ich den Browser kleiner/größer machen ... es nur beschließt, nicht die Größe der Elemente im richtigen Perzentil/Viewport-Teil. Daher erscheint es auf mobilen Geräten einfach unerwünscht. Bsp: Die Icons unten sollten niemals in die versteckte Ansicht gehen, aber wenn ich die Größe verändere, beschließt sie, sich unter dem unteren Bildschirmrand zu verstecken.Website überdimensionieren Elemente
HTML:
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>RG - Home</title>
</head>
<body>
<div class="header">
<p class="title">
<a class="option side-option" href="whatido.html">What I Do</a>
<a class="option side-option" href="products.html">Products</a>
<a class="option current" style="font-size: 4vmax;" href="index.html">RedstoneGaming</a>
<a class="option side-option" href="updates.html">Updates</a>
<a class="option side-option" href="aboutme.html">About Me</a>
</p>
</div>
<div class="content" style="width: 90vw;height: 80vh ">
<p class="text" align="center" style="font-size:6vmax; line-height:0;">Welcome to the Website!</p>
<p class="text" align="center" style="font-size:2vmax;padding-left:15vmax;padding-right:15vmax;">This website was made for the purpose of my YouTube Channel and coding products. On the site I will have updates on streams, videos, giveaways, etc. To learn more, go and visit the 'About Me' tab to learn about why I created a YouTube Channel,
who I am, and my schedule for the future.</p>
<br>
<br>
<p align="center" style="font-size:4vmax; line-height:0;" class="text">What's Going On?</p>
<p class="text" align="center" style="font-size:2vmax;padding-left:15vmax;padding-right:15vmax;">Below is the area where I will have the latest events embbed directly into the site just for you!</p>
<div style="overflow-y: hidden;width: 90%;height: 45%; margin-bottom: 2%;" class="content">
<p align="center" class="text" style="font-size: 2vmax;color: grey;top:50%;bottom: 50%;">No events have been posted..... Yet.</p>
</div>
</div>
<div class="footer">
<a href="https://www.youtube.com/channel/UCn1kMRRSG8-QdRWcaK7BgIw">
<img class="ScMedia" alt="Click here to go to my YouTube channel." src="http://www.redstonegaming.com/Images/Icons/youtube.png" />
</a>
<a href="https://twitter.com/thatredstonegt/">
<img class="ScMedia" alt="" src="http://www.redstonegaming.com/Images/Icons/twitter.png" />
</a>
<a href="">
<img class="ScMedia" alt="" src="http://www.redstonegaming.com/Images/Icons/google+.png" />
</a>
<a href="">
<img class="ScMedia" alt="" src="http://www.redstonegaming.com/Images/Icons/skype.png" />
</a>
<a href="">
<img class="ScMedia" alt="" src="http://www.redstonegaming.com/Images/Icons/instagram.png" />
</a>
<a href="">
<img class="ScMedia" alt="" src="http://www.redstonegaming.com/Images/Icons/facebook.png" />
</a>
</div>
</body>
</html>
CSS:
@font-face {
font-family: Tann;
src: url("TannenbergFett.ttf");
}
@font-face {
font-family: Space;
src: url("Spaceport_2006.ttf");
}
html {
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
body {
height: 99%;
width: 99%;
background-color: #222222;
background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0/15px 15px;
}
.header {
width: 100%;
}
.ScMedia {
height: 3.5vmax;
z-index: 6;
margin: .5% .5% .5% .5%;
float: right;
}
.footer {
margin-left: 5%;
margin-right: 5%;
}
@-webkit-keyframes anim {
from {
text-shadow: 0 0 10px #b30000, 0 0 20px #b30000, 0 0 30px #b30000, 0 0 40px #b30000, 0 0 70px #b30000, 0 0 80px #b30000, 0 0 100px #b30000, 0 0 150px #b30000;
}
to {
text-shadow: 0 0 5px #b30000, 0 0 10px #b30000, 0 0 15px #b30000, 0 0 20px #b30000, 0 0 35px #b30000, 0 0 40px #b30000, 0 0 50px #b30000, 0 0 75px #b30000;
}
}
@-moz-keyframes anim {
from {
text-shadow: 0 0 10px #b30000, 0 0 20px #b30000, 0 0 30px #b30000, 0 0 40px #b30000, 0 0 70px #b30000, 0 0 80px #b30000, 0 0 100px #b30000, 0 0 150px #b30000;
}
to {
text-shadow: 0 0 5px #b30000, 0 0 10px #b30000, 0 0 15px #b30000, 0 0 20px #b30000, 0 0 35px #b30000, 0 0 40px #b30000, 0 0 50px #b30000, 0 0 75px #b30000;
}
}
@keyframes anim {
from {
text-shadow: 0 0 10px #b30000, 0 0 20px #b30000, 0 0 30px #b30000, 0 0 40px #b30000, 0 0 70px #b30000, 0 0 80px #b30000, 0 0 100px #b30000, 0 0 150px #b30000;
}
to {
text-shadow: 0 0 5px #b30000, 0 0 10px #b30000, 0 0 15px #b30000, 0 0 20px #b30000, 0 0 35px #b30000, 0 0 40px #b30000, 0 0 50px #b30000, 0 0 75px #b30000;
}
}
p.title {
z-index: 5;
margin: 1% 0 1% 0;
text-align: center;
font-family: Tann;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a.option {
text-decoration: none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #fff;
padding-left: 2%;
padding-right: 2%;
}
a.current {
-webkit-animation: anim 1.5s ease-in-out infinite alternate;
-moz-animation: anim 1.5s ease-in-out infinite alternate;
animation: anim 1.5s ease-in-out infinite alternate;
}
p.title a:hover {
color: #ff9999;
}
.side-option {
font-size: 2vmax;
;
}
p.text {
opacity: 1;
font-family: Space;
z-index: 50;
color: #ffffff;
}
.content {
display: inline-block;
position: relative;
border-radius: 25px;
margin-left: 5%;
margin-right: 5%;
background-color: rgba(0, 0, 0, .35);
overflow-y: auto;
overflow-x: hidden;
position: relative
}
.chunk {} .video {}
Dies hilft, aber ich möchte in der Lage sein, es irgendeine Art und Weise, die Form, um die Größe oder Form und es immer noch ansehnlich sein. –
Dann sollten Sie sich 'Medienabfragen' anschauen http://www.w3schools.com/css/css_rwd_mediaqueries.asp. Sie können Regeln für jede Bildschirmgröße definieren. – hello
Oh! Wie für Handy, Desktop, Tablet, etc? –