如何使網站中的元素始終適合瀏覽器大小

我想使我的網站始終適合瀏覽器大小。現在，如果我用更小的屏幕去我的網站，一切都在混亂。這裏是我的代碼中的一個和CSS例子如何使網站中的元素始終適合瀏覽器大小

HTML

<div class="contactus"> 

<h2>Contact Us</h2> 

<h3>PhoneNumber</h3> 
<h3>812-123-4567</h3> 
<h3>Email</h3> 
<h3>[email protected]</h3> 
</div>

CSS

div.contactus { 
    position:absolute; 
    right:20px; 
    top:150px; 
    border: 2px solid; 
    border-color:#333; 
    width:100px; 
    font:20px;

來源

2016-11-01 王建捷

閱讀有關[https://en.wikipedia.org/wiki/Responsive_web_design](https://en.wikipedia.org/wiki/Responsive_web_design）\t 要解決的問題閱讀在你的情況下使用寬度百分比'寬度：100％' – Rohit

爲了使其響應你需要保持相對的CSS代碼單位，因爲乳清你使用固定單位代碼將無法適應屏幕，所以你將不得不讓你的代碼是這樣的：

div.contactus { 
    position:absolute; 
    right:5%; 
    top:25%; 
    border: 2px solid; 
    border-color:#333; 
    width:100%; 
    font:20px;}

如果百分比不好，只要繼續玩，直到你喜歡它。

來源

2016-11-01 20:50:57

響應媒體查詢會非常有幫助，但我看到的最大問題是您的容器（.contactus）不夠寬，無法容納您要放置的文本。嘗試將聯繫人寬度更改爲400px。但是，在較小的屏幕上，您應該有一個媒體查詢，根據視口寬度更新字體大小和容器大小。

來源

2016-11-01 20:52:22

首先歡迎我們的社區，第一次讀到這個話題，以幫助您解答更好的問題，並得到更精確的響應：https://stackoverflow.com/help/how-to-ask

關於你的問題，你必須更好地解釋你的意思「大鍋飯」是什麼。

我做了一個簡單的小提琴幫助您迴應的問題：https://jsfiddle.net/nLxa1745/

HTML

<div class="main"> 
    <img class="user-pic" src="http://placehold.it/250x150"> 
    <div class="contact-box"> 
    <h4 class="user-name">Contact Us</h4> 
    <ul class="info-contact"> 
     <li> 
     phonenumber 
     </li> 
     <li> 
     812-123-4567 
     </li> 
      <li> 
     email 
     </li> 
     <li> 
     [email protected] 
     </li> 
    </ul> 
    </div> 
</div>

CSS

body { 
    font-family: sans-serif; 
    color: #3f3f3f; 
} 

li{ 
    margin: 5px 0px 0px 20px; 
} 

.main { 
    border: 2px solid gray; 
    width: 250px; 
    margin: auto; 
    box-shadow: 2px 2px 5px 1px gray; 
} 

.user-pic { 
    border-bottom: 2px solid gray; 
} 

.user-name { 
    margin-left: 15px; 
    margin-bottom: 0; 
    color: #B77425; 
} 

.info-contact { 
    list-style-type: none; 
    padding: 0; 
} 


@media only screen 
and (min-width : 600px) { 
    .main { 
    width: 100%; 
    height: 150px; 
    } 
    .user-pic { 
    border-right: 2px solid gray; 
    float: left; 
    } 
    .contact-box { 
    float: left; 
    } 
}

來源

2016-11-01 20:55:26

如何使網站中的元素始終適合瀏覽器大小

回答

相關問題