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

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

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

ajax的响应，是bootstrap 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 children。

这只是一个起点，但通过一些工作可以起作用！

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。

将CSS文件应用于某个div

2 个答案: