使div內容響應

我的內容此刻不響應。我已經在iPhone上進行了測試，文本在屏幕上顯示。使div內容響應

我改變了容器的CSS來：

#container2 { 
    width: 960px; 
    max-width: 90%; 
    position: relative; 
    left: 50%; 
    margin-left: -480px; 
    line-height: 1.4em; 
}

當我改變後測試，內容消失。我讀了最大寬度：90％;將允許它不超過邊界寬度（http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design），但顯然它不起作用。我究竟做錯了什麼？

來源

2012-09-28 user1636968

我想看看你的利潤'左：50 ％;'和'margin-left：-480px'可能是多餘的，但是如果沒有看到你的上下文就不能分辨出來。對於響應式頁面，使用百分比而非像素大小定義會更有用。您可能想要查看CSS媒體查詢 – noel

試試這個CSS：

/* Show in default resolution screen*/ 
#container2 { 
width: 960px; 
position: relative; 
margin:0 auto; 
line-height: 1.4em; 
} 

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */  
@media only screen and (max-width: 479px){ 
    #container2 { width: 90%; } 
}

這裏演示：http://jsfiddle.net/ongisnade/CG9WN/

來源

2012-09-28 02:17:32 Fredy

也許更好，如果您以這種方式更改代碼： \t＃container2 { \t \t max-width：960px; \t \t寬度：100％; \t \t position：relative; \t \t margin：0 auto; \t \t line-height：1.4em; \t} –

不是很多去那裏，但我認爲你在尋找什麼是翻轉width和max-width值：

#container2 { 
    width: 90%; 
    max-width: 960px; 
    /* etc, etc... */ 
}

這會給你一個容器，是寬度的90％的可用空間，最大960px，但這取決於它的容器本身可以調整大小。響應式設計雖然是一個完整的蠟球，所以這甚至不會劃傷表面。

來源

2012-09-28 01:54:07 ultranaut

@media screen and (max-width : 760px)（平板電腦和手機），並使用這個：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

來源

2017-07-12 10:10:17 Scriptery

使div內容響應

回答

相關問題