Question

我的意思是我写了一些代码。它在1920x1080的屏幕上看起来很完美，但是我的朋友说他没有看到网站的顶部（他有更小的分辨率屏幕），除非他将页面的比例从100％（正常）降低到50％。当然它比较小，所以它不好。如果每个人都想检查我的网页是否正确地将我的对象缩放到他们的分辨率，那么有可能使其正确吗？这是我的代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

使用“媒体查询”，这将有助于您学习更好的网页设计....学习Bootstrap是一件好事，但当你擅长css然后去Bootstrap，这将有助于你学习更好的设计...

Check here how media query works

初学者HTML CSS代码在较小的分辨率上无法正确显示

1 个答案: