轉換爲響應式設計

我想下面的div代碼轉換爲響應代碼：轉換爲響應式設計

<div style="padding: 20pt 10pt 0pt 10pt; width: 45%; float: left; font-size: 16px; position: relative; top: 20px;"> 

    content1 

</div> 

<div style="padding: 20pt 10pt 0pt 10pt; width: 45%; float: right; font-size: 16px; position: relative; top: 20px; "> 

    content2 

</div>

什麼建議嗎？

來源

2014-04-19 Oualid

首先，儘量不要使用內聯CSS樣式，其中一個原因是它對我們來說不是很「用戶友好」。其次，當窗戶變得更薄/更寬時，元素的預期行爲是什麼？ –

這是多麼噁心，很高興看：http://jsfiddle.net/webtiki/4qL8v/1/ –

則可以將HTML更改爲以下，只需使用類與您的div從下面的css文件內容：

<div class="div-one"> 
    content1 
</div> 

<div class="div-two"> 
    content2 
</div>

您可以創建一個CSS文件和HTML標籤<head></head>內鏈接。另外，媒體查詢內的任何標記會在當瀏覽器窗口是750px寬下面玩：

.div-one{ 
    padding: 20pt 10pt 0pt 10pt; 
    width: 960px; 
    float: left; 
    font-size: 16px; 
    position: relative; 
    top: 20px; 
} 

.div-two{ 
    padding: 20pt 10pt 0pt 10pt; 
    width: 960px; 
    float: left; 
    font-size: 16px; 
    position: relative; 
    top: 20px; 
} 

@media screen and (max-width: 750px) { 

.div-one{ 
    width:90%; 
} 

.div-two{ 
    width:90%; 
} 

}

來源

2014-04-19 19:32:28 learn

您的解決方案工作正常！謝謝！ – Oualid

如果你想響應式設計，這是最好的使用百分比爲水平衡量一切。包括寬度，左右填充和邊距，並使用em作爲字號。你正在使用百分比，這是很好的，現在你可以更進一步，如果你願意，可以開始在填充中使用百分比。另外，在字體中使用em。

div{ 
width:45%; 
float:left; 
font-size:1em; 
padding:20pt 1% 0 1%; 
}

然後來媒體查詢。媒體查詢將有助於您的頁面在特定寬度下進行不同的響應。這很重要，因爲你使用的是百分比，會有一個寬度會讓你的頁面顯得很怪異。

假設頁面在900px處看起來很奇怪。您的媒體查詢可能看起來像這樣。

@media screen and (max-width:900px){ 
div{ 
float:none; 
position:static; 
width:80%; 
} 
}//close media query

所以現在在900px及以下，你的頁面將允許每個div佔用更多的這樣的屏幕在看小屏幕更好地應對。

試着玩弄寬度百分比和媒體查詢，你會發現它其實很簡單。玩的開心。

來源

2014-04-19 19:44:37

感謝您的提示！ – Oualid

轉換爲響應式設計

回答

相關問題