「正常」的CSS Boostrap 3

我是新興的響應世界，並使用使用引導的模板。「正常」的CSS Boostrap 3

我有下面的CSS，我想作出響應，但我不確定最好的方式來解決它。

我已經修改了以下theme

我想給Onesie標題移動到頁面的頂部 - 我已經改變的代碼到#siteTitleBox

將間隙的主題左側我創建了一個名爲#text的新div，這將顯示隨機帖子等數據

我有我想要的位置正確，但我現在需要幫助將其開發爲響應代碼。

CSS：

#siteTitleBox 
{ 
margin: -580px 0 0 0; 
height:150px !important; 
} 
#text{ 
margin:-568px 0 0 -135px; 
width:530px; 
height: 100% !important; 
border:1px solid transparent; 
color: #ffffff; 
background-color: rgba(0, 0, 0, .4); 
border-color: rgba(255, 255, 255, .9); 
} 
#text p{ 
margin: -65px 5px 0 5px; 
} 
#text h3{ 
margin:0 0 0 5px; 
} 
#siteTitleBox h1 a:hover{ 
color:#fff; 
}

HTML：

<div id="siteTitleBox">Page Title</div> 
<div id="text"><p>ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </p>

來源

2014-09-05 Jess McKenzie

使用不同的媒體查詢一開始，擺脫那些巨大的負面利潤率和！重要的修飾語。然後添加一些基於寬度的媒體查詢。如果你想要更具體的建議，你將不得不顯示一些HTML。 – recursive 2014-09-05 03:15:44

我什至不明白問題是什麼，並基於什麼 – Devin 2014-09-05 03:19:49

@Fabio我正在改變這個問題，我現在已經這樣做 – 2014-09-05 03:30:24

如果u想在responsive.don't使用像素基部寬用最好的方式，size.use％基於

width:50%

還想使用然後基於像素的聲明在CSS或HTML 像

CSS

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){ 
#text{ 
width:30px;} 
}` 
@media screen and (device-width: 450px) and (device-height: 100px) and (orientation:portrait){ 
#text{ 
width:320px;} 
}`

HTML

<link rel="stylesheet" media="(max-width: 450px)" href="phone.css" /> 
<link rel="stylesheet" media="(max-width: 760px)" href="tablet.css" />

來源

2014-09-05 03:18:23 yugi

「正常」的CSS Boostrap 3

回答

相關問題