我想定義一個 css 樣式表或添加一個主體 class 取決於視口大小

Question

我有一個 wordpress 網站，我希望通過 facebook 上的 iframe 提供內容。

Without using a wordpress plugin, I would like to know if I provide a function in jquery that basically says if viewport is equal to 520px then either load this css file or add this body class..

此外，如果視口 = 到 520px，則隱藏此元素..

我認為這是可以做到的，但經過大量搜索，我似乎無法找到明確的答案..

如果有人可以提供幫助，我將非常感激..

最親切的問候，

丹尼

Answer 1

對於 CSS，使用媒體查詢，例如：

<link href="BigScreen.css" media="screen and (min-device-width: 520px)" rel="stylesheet">

請注意，IE 6、7 和 8 不支持此功能，因此對於 IE 使用：

<!--[if lt IE 9]>
<link href="MegaFubarBrowser.css" media="screen" rel="stylesheet">
<![endif]-->

對於 JS，使用如下代碼：

if (screen.width <= 520) {
    $('.bigStuff').hide ();
}