CSS Media Queries vs Jquery 响应式解决方案？答案

【问题标题】：CSS Media Queries vs Jquery responsive solution?CSS Media Queries vs Jquery 响应式解决方案？
【发布时间】：2018-12-21 01:25:41
【问题描述】：

我一直在寻找有关响应式设计的很多信息，并且我看到了几种方法来做到这一点，无论是在服务器端还是在客户端，我想知道如何最好地做到这一点，无论是使用 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>

如果我用 css 来做这件事有好处吗？我只会运行 div 内的 php 脚本，这些脚本将具有正确的显示块？还是会从所有 php 脚本中下载所有 html？或者为此使用jquery会更有优势吗？我对此很懒，研究了很多，但答案并不多！

【问题讨论】：

标签： jquery css responsive-design media-queries

【解决方案1】：

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

【讨论】：

完全同意这一点，并且为了响应性，请确保不要复制html内容；让它与 CSS 和一些规划一起工作。
是不是我觉得有点重，例如移动用户必须下载只能在桌面上显示的代码，有什么办法可以解决这个问题？
代码速度快，资产速度较慢（如图片），所以如果您担心，可以使用 srcset 为不同的视口宽度提供不同的图片资产。
首先设计您的网站移动端，然后扩展到桌面端，这种方法倾向于使网站在所有平台上都有相似的体验，并且没有需要在移动端隐藏的桌面元素。