Javascript 响应式网站（链接Rel/媒体查询/加载Css和Html）

很高兴认识你们！我是来自巴西的Mauro Cordeiro，我开始学习编码，并学习了很多教程。我喜欢堆栈溢出！和你们学习很多

事实上，我是一名音乐家和角色动画师，我正在工作并完成我乐队的官方网站！它叫LeatherJacks，但我也喜欢编码=

我怀疑的是媒体查询和加载内容

我正在建立我的响应式网站，我的桌面Html代码的开头有这个链接Rel代码，如下所示：

<!--THE MAIN WEBSITE --> <link rel="stylesheet" type="text/css" href="M:\00_LEATHERJACKS - 2017\06_WEBSITE\01 - LeatherJacks - Website 2017\01_css\01_Responsive_1920px.css">




<!-- META TAGS FOR DIFFERENT RESOLUTIONS -->

<link rel="stylesheet" media="(max-width: 1368px)" href="M:\00_LEATHERJACKS - 2017\06_WEBSITE\01 - LeatherJacks - Website 2017\01_css\02_Responsive_1368px.css">

<link rel="stylesheet" media="(max-width: 1000px)" href="M:\00_LEATHERJACKS - 2017\06_WEBSITE\01 - LeatherJacks - Website 2017\01_css\03_Responsive_1000px.css">

<link rel="stylesheet" media="(max-width: 816px)" href="M:\00_LEATHERJACKS - 2017\06_WEBSITE\01 - LeatherJacks - Website 2017\01_css\04_Responsive_MOBILE.css">

但事实上，当我将我的浏览器重新定尺寸到816px时，它只加载css样式，而不加载另一个html文件：我为移动分辨率所做的html编码，包含较少的div和其他内容

伙计们，我如何在主Html代码中同时加载Html和CSS？ 最好的方法是什么

我尝试了一个jqueryif/Else条件查询，使用Location，但它不起作用

我需要的是一个页面，当它缩小到816px或更小的宽度时，它可以工作并改变css和html的所有内容

另一个分辨率1920像素、1368像素和1000像素的工作和适合作为手套哈哈！用百分比值工作，这是一个祝福哈哈

无论如何，非常感谢你们，伙计们

任何帮助对我完成和发布我的页面都是宝贵的

让我们摇滚吧

毛罗。

试试以下方法：

例如：

您也可以在一个文件中包含所有媒体查询：

例如：

另外，我强烈建议您使用没有空格的文件夹结构

空格字符不安全，因为有效空格可能会消失 在转录URL时，可能会引入不重要的空格 或排版，或接受文字处理程序的处理

我建议您使用相对路径：

相对路径 资料来源：

图像是否与引用它的文件位于同一目录中？ 图像是否在下面的目录中？ 图像是否在上面的目录中？ 下面和上面，我指的是子目录和父目录。 相对文件路径为我们提供了一种双向传播的方式。坐 请看我的原始示例：

以下是有关相对文件路径的所有信息：

从/开始返回根目录并从那里开始 从..开始/向后移动一个目录并从那里开始 从.././开始向后移动两个目录并从那里开始，依此类推。。。 要继续前进，只需从第一个子目录开始并继续前进 在另一个HTML中包含HTML

使用纯Javascript：

HTML

JS

使用jQuery：

HTML

JS

---

我会这样做的。。我将把html代码放在一页中。。然后使用jquery调整大小。。然后为该html代码显示无，为另一个代码显示块。。然后对于css，我将使用媒体查询..我该怎么做，阴影恶魔？我喜欢这个主意！看看这基本上就是我的想法…哇！！！我要试试看！马阿阿阿南，非常感谢你！你救了我的命=哇，非常感谢你，哈什！我开始了解更多关于目录的信息。。。这对我来说仍然有点困惑，但我开始越来越适应它们了！我做了你的链接建议，去掉了空间，一切正常。。。但正如我之前所说，我的网站只加载css样式。。。当最大宽度等于或小于816px时，我需要让我的浏览器也加载我的Mobile Alternative Version.html，你知道吗？你能帮我解决这个问题吗？非常感谢你=有没有一种方法可以告诉我的Main.html文件可以通过标签来加载mobile.html和它各自的mobile.css样式和代码？如果加载的意思是包括，我已经添加了解决方案。非常感谢，散列。。。但它仍然不起作用=我的意思是。。。在最大宽度=816px的情况下，我将变量放在哪里加载我的备用移动站点？将类似于包含链接rel max width 816px的div includedContent，然后是后面的java脚本？还是将所有新的css样式编码作为样式放在包含内容div中？

<link rel="stylesheet" media='screen and (min-width: 816px) and (max-width: 1000px)' href="04_Responsive_MOBILE.css"/>
<link rel="stylesheet" media='screen and (min-width: 1001px) and (max-width: 1368x)' href="03_Responsive_1000px.css"/>

<div w3-include-html="content.html"></div>

<script>
w3.includeHTML();
</script>

<div id="includedContent"></div>

<script> 
$(function(){
  $("#includedContent").load("content.html"); 
});
</script>