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

Posted 2023-03-06

技术标签:

【中文标题】如何将样式仅应用于引导程序中的特定屏幕类型【英文标题】：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;

我该怎么做？

谢谢

【问题讨论】：

研究“CSS 媒体查询”。 【参考方案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;

Read more about media queries here.

【讨论】：

【参考方案2】：

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

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

这会照顾你的 xs 屏幕

参考：Twitter Bootstrap 3: how to use media queries?

【讨论】：

以上是关于如何将样式仅应用于引导程序中的特定屏幕类型的主要内容，如果未能解决你的问题，请参考以下文章