CSS媒体查询与Jquery响应解决方案？_Jquery_Css_Responsive Design_Media Queries

CSS媒体查询与Jquery响应解决方案？

jquery css responsive-design

CSS媒体查询与Jquery响应解决方案？,jquery,css,responsive-design,media-queries,Jquery,Css,Responsive Design,Media Queries,我一直在寻找很多关于响应式设计的知识，我看到了几种实现方法，无论是在服务器端还是在客户端，我想知道如何最好地实现它，无论是使用jquery还是css媒体查询。但我正在做一个大型网站，有用户注册和上传文件的可能性。我在考虑在索引中创建div，它包含根据屏幕显示的php文件，这些div具有display:none，它们仅根据屏幕大小通过媒体查询启用，如下例所示： <!DOCTYPE html> <html> <head> <title>Page Ti

我一直在寻找很多关于响应式设计的知识，我看到了几种实现方法，无论是在服务器端还是在客户端，我想知道如何最好地实现它，无论是使用jquery还是css媒体查询。但我正在做一个大型网站，有用户注册和上传文件的可能性。我在考虑在索引中创建div，它包含根据屏幕显示的php文件，这些div具有display:none，它们仅根据屏幕大小通过媒体查询启用，如下例所示：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>

 @media screen and (min-width: 600px) {
    .600px-min{ display: block }
    .940px-min{ display: none }
 }

 @media screen and (min-width: 940px) {
    .940px-min{ display: block }
    .600px-min{ display: none }
 }

</style>

</head>
<body>
   <div class="600px-min" style="display:none">
       <? php include("contents_600px.php"); ?>
   </div>

   <div class="940px-min" style="display:none">
       <? php include("contents_940px.php"); ?>
   </div>

</body>
</html>


页面标题
@媒体屏幕和屏幕（最小宽度：600px）{
.600px最小值{显示：块}
.940px最小值{显示：无}
}
@媒体屏幕和屏幕（最小宽度：940px）{
.940px最小值{显示：块}
.600px最小值{显示：无}
}

如果我用css做这件事，它是否有利？我只运行div中的php脚本，它将具有正确的显示块？或者它会从所有php脚本下载所有html吗？或者使用jquery来实现这一点会更有利吗？我很懒，我做了很多研究，但是没有太多的答案

CSS媒体查询是构建响应式网站的唯一现代方式。jQuery和服务器端解决方案已经过时了大约十年。

完全同意这一点，同时也要确保不要为了响应而复制html内容；让它与CSS和一些计划一起工作。是不是我觉得它有点沉重？例如，移动用户必须下载只在桌面上显示的代码，有没有办法解决这个问题？代码速度快，资产速度慢（如图像），所以如果你担心它，使用srcset为不同的视口宽度提供不同的图像资源。首先设计移动站点，然后放大到桌面。此方法倾向于创建在所有平台上都有类似体验的站点，并且不需要在移动设备上隐藏桌面元素。