Html 不同设备的引导段落格式化

嗨，我对bootstrap还不太熟悉，我正在努力实现的是在我的页面顶部有一个具有不同段落格式的jumbotron，以适应占用30%全宽空间的背景图像

我已经通过左填充偏移了文本：300px；它在台式机上看起来不错，但这条规则也适用于移动设备模式下的段落，导致段落非常瘦高

---

有没有一种方法可以设置3个不同的段落，每个段落在特定屏幕大小下显示？

只需使用媒体查询：

@media screen and (max-width: 320px)
{
    p{
        padding-left: 0;
    }
}

@media screen and (min-width: 321px) and (max-width:800px)
{
    p{
        padding-left: 100px;
    }
}

@media screen and (min-width: 801px)
{
    p{
        padding-left: 300px;
    }
}

---

嘿，我会告诉你一些我目前所知道的信息。。您可以浏览名为“媒体查询”的主题，这将有助于了解有关此类问题的更多信息。如果你想要有响应性的设计，你永远不应该使用像素…你应该总是选择ems或百分比。我听说在rails 4中，我们有一个新特性叫做变体，我们可以根据设备定义样式表。