Boostrap 3的“普通” CSS

Question

我是響應式世界的新手，正在使用使用引導程序的模板。

我有以下要響應的CSS，但不確定如何做到這一點。

我修改了以下主題

我想將Onesie標題移到頁面頂部-我已將代碼移到#siteTitleBox

在主題左側的#text我創建了一個名為#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>

Answer 1

如果你想在響應中使用最好的方法。不要使用像素的基本寬度，size。使用基於％

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" />