使用jQuery进行响应式网页设计可以吗？

我受命更新站点以使其响应并在智能手机上正确显示。不幸的是，当前形式的网站不是很容易使用-我不能只更改CSS。

检测浏览器大小并使用jQuery更改CSS是否被认为是不好的？

例如：

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}

您应该考虑改用媒体查询，因为自2012年6月起，W3C一直建议使用媒体查询。

您是要更改样式表吗？我也这么认为，但我仍然必须更改很多元素

是。无论如何，我认为您会进行很多CSS更改。

句子“我已被要求更新站点以使其具有响应能力”不应跟着“我不能只是更改CSS”

一切都需要更多的jQuery（免责声明：请不要认真对待）

#1 楼

当然。显然，最好单独使用CSS，但如果不能使用，请使用已有的CSS。使用CSS尽您所能，并根据需要使用JS。不知道为什么不能更改现有CSS，但是可以使用JS添加样式表。

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

来源：http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

然后使用CSS / media查询。

或使用jQuery：

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

我已经完成了一些皮肤的响应式“皮肤”如果不更改DOM就无法做到。如果您无权访问HTML，则JS DOM操作有时是唯一的答案。

编辑：
根据您的小屏幕版本的视觉要求，您可能会惊讶于此CSS代码段将带您迈向“移动友好”的道路。

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

如果原始CSS开发人员过分喜欢!important，而您无法使用HTML，则可以使用jQuery / JS在主体或高级容器中添加ID，然后将其添加到选择器。

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }

根据我的经验，仅使用CSS即可完成响应式设计。一旦您的设计也需要变得自适应，您可能还需要一些Javascript。请记住，您要使javascript尽可能少。

–马可
2014年4月8日下午13:46

#2 楼

我会说先尝试使用媒体查询。在处理最初仅用于桌面的设计时，我发现一种更容易的方法是：

从两个单独的样式表开始。一个用于新的响应式设计，另一个用于旧的桌面版本：

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

所有旧样式都可以包含在desktop.css中。同时，您可以从mobile.css重新开始。您可能会发现，在适用于平板电脑的移动CSS中，您可以做出一个不错的单列布局。

这种方法可以让您有一个全新的起点，并且可以专门为手机和平板电脑以及没有桌面样式通过和覆盖的东西。您可以根据移动设备的需要隐藏/显示/放置元素。

如果您确实需要更改桌面代码以使其与移动设备和桌面设备一起使用，则可以重构标记。另外，如果您发现无法针对响应和移动版本重构HTML，则可以在桌面代码上放置一个类，例如类“桌面”，并在移动版本中使用CSS对其进行隐藏。然后为该部分编写一些新的HTML并给它一个class="mobile"。然后在mobile.css中对其进行相应样式设置，并将其隐藏在desktop.css中。

#3 楼

我在使用该方法的网站上工作，但在移动设备上旋转屏幕时遇到问题。由于JavaScript仅在页面加载时检测一次，因此如果用户旋转设备，它将不会像媒体查询那样扩展到全宽。当时对我来说，切换到CSS更容易，但是也许JS专家会知道是否有办法检测视口宽度的变化。似乎应该使用AJAX，但我愿意打赌，您发现任何对性能影响都过大的东西，如megasteve所述。

#4 楼

响应性和“正确显示在智能手机上”是完全不同的任务。

大概，响应性是指在可能的情况下消除与服务器的额外往返。错误检查，Ajax检索请求的数据以及动态DOM操作通常是提高响应能力的任务。使用JavaScript（或JavaScript框架）是一种有效的方法。在过去的几年中，对于这些实现，我已经从JavaScript转到jQuery。在许多情况下，jQuery具有内置的浏览器兼容性，这具有明显的优势。 datepicker，自动完成和菜单的插件可以节省开发时间。

它不应该是样式的主要来源。这就是CSS的工作。但是，两者可以有效地一起使用。在一个简单的示例中，文本的样式可能会有所不同，具体取决于某些操作的结果。 jQuery可用于更改CSS定义的类。

$('#result').removeClass('red').addClass('green');

试图通过动态改变样式来尝试将标准页面重新用于移动设备。我的经验是，它不能提供令人满意的解决方案。 CSS完全不同，需要使用不同的客户端脚本来利用移动功能。我更喜欢创建单独的专用HTML页面，而不是创建一个需要逻辑来选择要使用的样式或功能的页面。

发问者提到“响应式网页设计”（en.wikipedia.org/wiki/Responsive_web_design），指的是针对不同的屏幕尺寸和功能进行设计。尽管它不是专门针对手机的，但这是将这项技术推向最前沿的重要因素。

–雅各布·休ume
2014年4月11日在17:40

#5 楼

我们曾经在网站上使用流行的960.gs css框架。

我们想使其具有响应性。

有人为960 gs制作了一个基于JS的响应式插件。因此我们认为hay为什么不使用它，因为我们不必对结构网站模板进行任何更改。

它可以工作，但在大多数浏览器（包括好的浏览器）中都比较落后。通常，您会看到“未样式化内容的闪烁”，具体取决于页面的复杂性。

尽管JS解决方案并不理想，但CSS 3媒体查询是最好的选择。最后，我们只是使用Twitter Bootstrap重新设置了我们的网站模板，这非常适合我们的需求。

虽然捷径似乎很可行，但这样做通常会更加耗时/痛苦。从长远来看。

编程黑洞网