0
私はいくつかのコードを書いています。それは1920x1080の画面に完全に表示されますが、私の友人は、ページの縮尺を100％（通常）から50％に減らさない限り、ウェブサイトのトップは表示されないと述べています。 もちろんそれは小さいので、それは良くありません。誰もが私のウェブページを自分のオブジェクトの解像度を自動的に自分の解像度に合わせてチェックしたいのであれば、それを正しくする可能性はありますか？ は、ここに私のコードです：初心者のHTML CSSコードが小さい解像度で正しく表示されない
.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>
...あなたはより良いデザインを学ぶのを助けることのブートストラップのために行く私は応答Webデザインにいくつかのチュートリアルビデオを見て、メディアクエリを使用してお勧めしたいです。彼らは異なる画面サイズであなたのウェブサイトを異なるスタイルにすることができます。この質問は、あなた自身がこのトピックについて勉強しようと試みて、それに問題があるまで、本当に答えられません。 Team Treehouseは、無料トライアルを提供しており、レスポンシブなウェブデザインセクションを含む優れたウェブサイトビルディングトラックを持っています。https://teamtreehouse.com/library/how-to-make-a-website 幸運を祈る！ – Kyle