Css 如何仅将样式应用于引导中的特定屏幕类型

我有一个通用的样式定义

.main-site-nav li a {
    padding-left: 0;
}

现在，我们只想在超小屏幕（xs）中为

应用一种不同的样式

/* xs screens only */
.main-site-nav li a {
    padding-left: 15;
}

我怎么做

谢谢
使用以下媒体查询。我假设你的小屏幕分辨率是500px

 @media all and (max-width: 500px)
 {
   .main-site-nav li a {
     padding-left: 15;
   }
 }

您还可以指定
最小宽度
和
最大宽度
，如下所示

 @media all and (max-width: 500px) and (min-width: 380px)
 {
   .main-site-nav li a {
     padding-left: 15;
   }
 }

BS3（v3.2.0）中使用的选择器，如果您希望保持一致：

@media(max-width:767px){
  .main-site-nav li a {
    padding-left: 15;
  }
}

这将照顾你的xs屏幕

请参阅：
研究“CSS媒体查询”。