javascript - HTML - 使用媒体查询加载单独的布局

Question

所以我正在寻找一种方法来改进我当前的网页设计/开发工作流程/流程。基本上我想为我制作的每个页面设计三到四个布局，并且我希望能够设置一个断点来加载该页面的不同版本。

例如: 我的站点有三个页面:主页、服务和联系方式，然后我为每个页面都有一个手机和平板电脑版本。

是否可以使用媒体查询根据屏幕宽度加载不同的 html 布局？我只想使用 javascript，但想知道我是否能够获得媒体查询的“感觉”？

感谢您的帮助

Answer 1

媒体查询可用于根据屏幕尺寸为给定容器定义特定的 css 规则。

例子:

#include {
      background-color: blue;
 }

@media screen and (max-width: 960px) {
    #include {
        background-color: lightblue;
    }
}

为了加载完全独立的布局，您必须使用服务器端语言(php/python 等)或通过 javascript 或 jquery 的客户端。我更喜欢 jquery，它看起来像这样:

if ($(window).width() < 960) {
    $("#include").load("layout-1.html"); 
}
else {
   $("#include").load("layout-2.html");
}