引導忽略某些媒體查詢

我目前沒有與下面的內容SCSS文件：引導忽略某些媒體查詢

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
// Something here 
} 

/* Desktop */ 
@media (min-width: 981px) and (max-width: 1198px) { 
// Something here 
} 

/* Large Desktop */ 
@media (min-width: 1200px) { 
// Something here 
}

如果我加載application.css文件中的Rails，我得到如下：

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
    /* Remove gap between nav and content*/ 
    /* line 120, ../../app/assets/stylesheets/static_pages.css.scss */ 
    .navbar-fixed-top { 
    margin-bottom: 0 !important; 
    } 

    /* Remove any padding from the body */ 
    /* line 125, ../../app/assets/stylesheets/static_pages.css.scss */ 
    body { 
    padding-top: 0 !important; 
    } 

    /* line 133, ../../app/assets/stylesheets/static_pages.css.scss */ 
    .static_pages-controller-home .landing .sign-up { 
    display: none; 
    } 
    /* line 142, ../../app/assets/stylesheets/static_pages.css.scss */ 
    .static_pages-controller-home .container #students #bulletpoints h2, .static_pages-controller-home .container #students #bulletpoints p { 
    text-align: left !important; 
    } 
} 
/* Desktop */ 
/* Large Desktop */ 
@media (min-width: 1200px) { 
    /* Remove gap between nav and content*/ 
    /* line 168, ../../app/assets/stylesheets/static_pages.css.scss */ 
    .navbar-fixed-top { 
    margin-bottom: 0 !important; 
    } 

    /* Bypass left & right padding */ 
    /* line 186, ../../app/assets/stylesheets/static_pages.css.scss */ 
    .static_pages-controller-home .container #students #bulletpoints h2 { 
    text-align: left !important; 
    } 
}

注意，在編譯的文件，我們有評論/* Desktop */，但媒體查詢中的CSS不存在，事實上，它似乎編譯忽略了整個媒體查詢。有沒有辦法解決這個問題？

我的目標是爲該寬度範圍提供一些特定的CSS。

來源

2013-02-08 Hengjie

沒有看到你的實際代碼，我最好的猜測是你在未編譯的文件中有一個格式錯誤。沒有理由不能爲桌面系列提供一些CSS。

你可以試試這個。

讓您未編譯文件的備份，然後啓動一個新的剛剛有：

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { 
// Something here 

    font-color{ 
    color:red; 
    } 
} 

/* Desktop */ 
@media (min-width: 981px) and (max-width: 1198px) { 
// Something here 

font-color{ 
    color:green; 
    } 
} 

/* Large Desktop */ 
@media (min-width: 1200px) { 
// Something here 

font-color{ 
    color:blue; 
    } 
}

編譯這個和驚喜，驚喜的字體顏色將不同的觀點而改變。

一旦您完成了這項工作，請將其他@media內容逐份添加回來，以便查明原因。

祝你好運

來源

2013-02-08 13:10:06

舊帖子，但也許我可以幫助別人。

我解決這個問題，增加這個HTML裏面<head>...</head>

<head> 
    ... 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    ... 
</head>

來源

2017-01-31 15:53:09 inye

引導忽略某些媒體查詢

回答

相關問題