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