迴應網站

Question

我有一個項目來創建網站，但我讓它手動不使用引導程序。 問題是，當我放大和縮小，它不響應.. 所以，如何創建一個響應式網站在任何類型的屏幕，當我放大/縮小？ 這裏是我的CSS代碼

體{FONT-FAMILY： '蒙特塞拉特'，無襯線;}

.wadah{ 
    width:83.8%; 
    height:1000px; 
    position:absolute; 
    z-index:1; 
    top:650px; 
    left:102px; 
    background:white; 
    border:1px solid #d2d1d1} 
.top-news{ 
    width: 1125px; 
    height:220px; 
    background:#; 
    border-bottom:1px solid #d2d1d1} 
.top-news-inside{ 
    width:281.25px; 
    height:220px; 
    float:left; 
    padding:20px; 
    box-sizing:border-box; 
    background:#; 
    } 
.content{ 
    width:1125px; 
    height:auto; 
    background:#} 
.content-left{ 

    } 

Answer 1

隨着CSS3，你可以使用一些媒體查詢： http://www.w3schools.com/css/css_rwd_mediaqueries.asp

你只必須選擇合適的斷點並重寫當前的樣式。例如，您可以在媒體查詢中添加float: left規則float: none屬性的所有元素，並將它們的寬度擴展到屏幕的100%（您可以對此類更改top-news-inside類）。這會將您的網站分爲多列。

爲了控制浮動元素請確保您使用clear: both規則： http://www.w3schools.com/css/css_float.asp

Answer 2

添加這頭：

<link rel="stylesheet" type="text/css" href="responsive.css"> 

創建像responsive.css

一個CSS文件作出迴應你應改變你的css代碼不同大小

例如：

@media only screen and (max-width: 360px) { 
.wadah{ 
    height:200px; 
    top:350px; 
    left:52px; 
} 
} 

或

@media only screen and (max-width: 640px) { 
.wadah{ 
    height:400px; 
    top:500px; 
    left:80px; 
} 
} 

*較大尺寸應該更高*

這個你可以做的比大小的改變（如改變顏色或使移動導航欄）

更多

我希望這有用

對不起，我不喜歡英語：D