0
Je veux dire que j'ai écrit du code. Il apparaît parfaitement sur écran 1920x1080, mais mon ami a dit qu'il ne voit pas le haut du site (il a un écran de résolution plus petit) à moins qu'il ne diminue l'échelle de la page de 100% (normal) à 50%. Bien sûr, c'est plus petit, donc ce n'est pas bon. Il y a une possibilité de le rendre correct si tout le monde veut vérifier ma page Web à l'échelle de mon objet correctement à leur résolution automatiquement? Voici mon code:Code HTML CSS débutant ne s'affiche pas correctement sur une résolution plus petite
.grey {
background-color: rgba(30, 32, 29, 0.5);
}
.brown {
background-color: rgba(85, 41, 0, 0.6);
}
.red {
background-color: rgba(255, 0, 0, 0.4);
}
.purple {
background-color: rgba(152, 0, 255, 0.4);
}
.blue {
background-color: rgba(0, 0, 255, 0.4);
}
.yellow {
background-color: rgba(255, 255, 0, 0.3);
}
/* CSS reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
body {
height: 100vh; /* középre rendezés */
display: flex; /* középre rendezés */
align-items: center; /* középre rendezés */
justify-content: center;/* középre rendezés */
background: url('http://www.galaxyradio.es/wp-content/uploads/2016/09/Galaxy-Background.jpg') no-repeat center center fixed; /* teljes nagítású háttér */
background-size: cover;/* teljes nagítású háttér */
}
#head, #headstory {
text-align: center; /* középre rendezés szöveg*/
}
#head {
margin: 0 auto;
}
img {
margin-top: -60px;
width: 19%;
height: 19%;
border-radius: 50%;
padding: 1px;
background-color: #666;
filter: grayscale(50%);
transition: all 0.5s ease-in-out;
}
img:hover {
filter: grayscale(20%);
transform: scale(1.1);
}
#profile-card {
background-color: hsla(0, 0%, 100%, .5);
border-radius: 4px;
box-shadow: hsla(0, 0%, 0%,0.9) 10px 10px 80px;
}
#music-title {
text-align: center;
color:rgba(255,255,255,.8);
font-size: 20px;
}
#contacts {
text-align: center;
}
@media (max-height: 850px) {
body {
height: initial;
}
#profile-card {
margin-top: 60px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="profile-card" class="grey">
<div id="head" class="">
<div id="imgsen" class="">
<img src="http://kepkezelo.com/images/ljookd6qf43392rycg01.jpg" alt="coder">
</div>
<div id="headlines" class="">
My name is
<p> <h1>Junior Elliot</h1><p>
My job is
<p> <h3>Learn programming</h3>
From
<p> <h2><i class="fa fa-map-marker"></i> Don't tell anyone <br>but i dont even know.</h2>
</div>
<div id="headstory" class="">
"Learn from every mistake you made. Adapt and Evolve".
</div>
<div id="music-title" class="grey">
<h2>my music</h2>
</div>
<div id="youtubelink" class="g">
<iframe width="640" height="360" src="https://www.youtube.com/embed/kDqdM7wLVns" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="contacts" class="">
You can contact me via
<p> <a href="https://en.wikipedia.org/wiki/Telepathy" target="_blank"> Telepathy </a> </p>
</div>
</div>
</body>
</html>
Je vous suggère de regarder quelques vidéos tutoriel sur Responsive Web Design et en utilisant des requêtes des médias. Ils vous permettent de personnaliser votre site Web à différentes tailles d'écran. Cette question ne peut pas vraiment être résolue jusqu'à ce que vous ayez essayé d'étudier vous-même ce sujet et que vous ayez des problèmes avec celui-ci. Team Treehouse offre un essai gratuit et a une bonne piste de construction de site Web, y compris une section de conception de sites Web réactifs: https://teamtreehouse.com/library/how-to-make-a-website Bonne chance! – Kyle