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

Question

很高兴认识你们！我是来自巴西的Mauro Cordeiro，我开始学习编码，并学习了很多教程。我喜欢Stack Overflow！和你们一起学习很多东西！

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

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

我正在建立自己的响应式网站，我在桌面Html代码的开头有这个“Link 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，伙计们？ 最好的办法是什么？

我尝试了一个jquery If / Else条件，使用“Location”，但它没有用。

我需要的是一个可以工作的页面，当缩小到816像素宽度或更小时，可以将所有内容（包括css和html）连接起来。

其他分辨率（1920px，1368px和1000px）可以作为手套使用哈哈！使用百分比值是一个祝福哈哈！

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

任何帮助对我来说都很宝贵，可以完成并发布我的页面！

让我们摇滚！

莫罗。

Answer 1

尝试类似：

示例：

<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"/>

您也可以将所有媒体查询都放在一个文件中：

示例：

此外，我强烈建议你有文件夹结构没有空格。

  

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

我建议您使用相对路径：

相对路径
（来源：Quick Reminder About File Paths）

  

  
• 图像与引用它的文件位于同一目录中吗？
  
• 目录位于
目录下   
• 目录上方？
  

     

“下面”和“上面”是指子目录和父目录。   相对文件路径为我们提供了双向旅行的方式。拿一个   看看我的原始例子：

     

以下是您需要了解的相关文件路径：

     

  
• 以“/”开头，返回根目录并从那里开始
  
• 以“../”开头向后移动一个目录并从那里开始
  
• 从“../../”开始向后移动两个目录并从那里开始（依此类推......）
  
• 要继续前进，只需从第一个子目录开始并继续前进
  

将HTML包含在其他HTML

中

使用纯Javascript：

HTML

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

JS

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

使用jQuery：

HTML

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

JS

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