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

11

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

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

例如：

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

— 狗狗
source

7

您应该考虑改用媒体查询，因为自2012

— 。– Zistoloen 2014年

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

— MeltingDog 2014年

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

— Zistoloen 2014年

2

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

— Francisco Presencia 2014年

4

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

— Darkhogg 2014年

13

当然。显然，最好单独使用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; 
        ...
   }

— 将
source

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

— Marco Marco

4

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

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

<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，则可以在桌面代码上放置一个类，例如“ desktop”类，并在移动版本中使用CSS来隐藏它。然后为该部分编写一些新的HTML并给它一个class="mobile"。然后在mobile.css中对其进行相应样式设置，并将其隐藏在desktop.css中。

— 光速器
source

3

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

— 斯蒂芬妮
source

2

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

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

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

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

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

— 斯蒂芬妮·佩里
source

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

— Jacob Hume 2014年

1

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

我们想使其响应。

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

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

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

尽管捷径可能会使人痛苦，但从长远来看，通常会更耗时/更痛苦。

— megasteve4
source