“正常”的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

回答

相关问题