将 CSS 文件应用到某个 div

Question

我有一个 site.css 和类似于 mobile.css 的东西。 我正在构建的是一个网页，您可以在其中预览您制作的应用程序。想象一下，它就像一个分为两半的网站，其中一半有一个带有控件的面板，而另一半有一个预览 (div)，目前设计为手机。

所以我实际上在我的网站上做的是一部手机（预览版），但问题是我不知道如何仅在预览 div 中使用 mobile.css 文件。

有没有办法为一个 div（及其子级）导入 CSS 文件？

我的页面的简化外观：https://jsfiddle.net/kc8rgde2/1/

<iframe>、<style scoped> 或外部 CSS 预处理器不是一个选项。

编辑： 我有点决定使用 SASS，因为它最容易理解，而且 Visual Studio 有一个很好的扩展。

感谢大家的帮助。

Answer 1

我有个主意。它可以工作，并且需要大量测试。检查这个小提琴-> https://jsfiddle.net/kc8rgde2/2/

基本上，如您所见，在小提琴中没有加载引导程序。 我加载引导程序，并使用 AJAX 请求中的 CDN 链接访问文件。

ajax 的响应，是引导 css 文件的内容（缩小版）-（检查控制台！）

我之后要做的是用 ("#phonePreview .") 替换所有类（点），这会将电话预览 div id 添加到所有类。

$(document).ready(function() {   
   $.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
  .done(function(response) {
    var res = response.replace(/\./g,'#phonePreview .')
    console.debug (res);
    $('<style />').text(res).appendTo($('body'))
});
})

添加父 ID 意味着这些类仅适用于 #phonePreview 子代。

这只是一个起点，但通过一些工作它可能会奏效！

Answer 2

如果您想为特定尺寸的设备使用样式，您可以使用媒体查询：

@media only screen and (max-width: 431px) {

.myDiv {
style: style;
style: style;
}

#div2 {
style: style;
style: style;
}

}

max-width: 431px 表示宽度为 431 像素或更低的设备。您也可以使用高度并将其更改为min-width。