自動檢測移動設備或解決方案和調整CSS相應

我想知道我怎麼會根據設備或屏幕（分辨率或兩個裝置的一個例子，改變菜單欄的CSS設置分辨率檢測）。自動檢測移動設備或解決方案和調整CSS相應

例如：

甲black菜單欄有width:800px;和height:50px;通常，然而，如果屏幕是波紋管某一分辨率和/或在檢測到移動設備，所述black欄將改變到blue與width:300px;和height:150px;。

我猜這是simular它是如何工作的：

如果screen <= 300px, use this CSS或者如果screen > 300px, use this CSS。

幫助將不勝感激。

來源

2013-11-10 Bert Starington

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – elclanrs

感謝您的信息。基於我提供的選項（寬度; /高度; /背景顏色;）的示例對我和其他想要了解此功能的人更有好處。 –

這就是您將使用Media Queries的原因。你可以找到很多關於如何在整個網絡中使用它們的例子。只是谷歌「CSS媒體查詢」，但這是一個非常基本的一組查詢，讓你瞭解它的工作原理。

@media all and (max-width: 300px) { 
    .menubar { 
     // code for below 300px 
    } 
} 

@media all and (min-width: 301px) { 
    .menubar { 
    // code for above 301px 
    } 
}

來源

2013-11-10 02:01:14 StephenCollins

謝謝，完美的作品。 –

以下是CSS：

@media screen and (max-width: 300px) { 
    #black-bar { 
      width: 300px; 
      height: 150px; 
      background-color: blue; 
    } 

    /*Additional styles can be added like... 
     body {background-color: green;}*/ 
}

你也可以做@media打印，如果你想讓它僅在打印網頁時執行這種方式，或者只是@media或@media所有，如果你想它可以在所有情況下執行。

有關詳細信息，請參見https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。

來源

2013-11-10 01:56:34 sheng

感謝您的幫助。 –

沒有問題。我真的偷了@elclanrs的MDN鏈接。 – sheng

自動檢測移動設備或解決方案和調整CSS相應

回答

相關問題