初學HTML CSS代碼在較小分辨率下無法正確顯示

我的意思是我寫了一些代碼。它在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>

來源

2017-05-25 cool ice

我建議看在響應性網頁設計的一些視頻教程和使用媒體查詢。它們允許您在不同的屏幕尺寸下設置不同的網站風格。在您嘗試自己學習這個主題並且遇到問題之前，不能真正回答這個問題。團隊樹屋提供免費試用，並有一個良好的網站建設跟蹤，包括響應網頁設計部分：https：//teamtreehouse.com/library/how-to-make-a-website 祝你好運！ – Kyle

使用「媒體查詢」，這將有助於你更好地學習網頁設計....學習引導是一件好事，但是當你是好與CSS然後去引導，這將有助於你更好地學習設計......

Check here how media query works

來源

2017-05-25 20:04:45 ankitbaid11326

儘管此鏈接可能會回答問題，但最好在此處包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – Tom

初學HTML CSS代碼在較小分辨率下無法正確顯示

回答

相關問題