如何将样式仅应用于引导程序中的特定屏幕类型答案

【问题标题】：How to apply style only to particular screen type in bootstrap如何将样式仅应用于引导程序中的特定屏幕类型
【发布时间】：2014-10-14 16:33:29
【问题描述】：

我有一个通用的样式定义为

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

现在只想在超小屏幕 (xs) 中为 .main-site-nav li a 应用不同的样式，如下所示。

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

我该怎么做？

谢谢

【问题讨论】：

【解决方案1】：

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

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

您还可以指定min-width 和max-width，如下所示。

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

【讨论】：

【解决方案2】：

BS3 (v3.2.0) 中使用的选择器，如果你想保持一致：

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

这会照顾你的 xs 屏幕

【讨论】：