我们需要使用javascript来创建响应式布局吗？

Question

我下载了几个免费的响应式布局(如果你很好奇,你可以通过谷歌找到它们),我看到布局至少有一个或两个javascript文件.

问题是:javascript对于创建响应式布局至关重要？

然后,在回答这个问题是"不",你也有可能链接一个只有html和CSS的免费响应式布局,好吧,你会收到一个很棒的谢谢你.

Answer 1

响应式布局的重点在于它可以(而且应该)仅使用CSS3媒体查询.

但是,这通常需要一些聪明的HTML设计,特别是如果你想要一个滑入式菜单(提示::active结合起来可以非常强大,tabindex以使"惰性"元素响应链接等点击事件)和许多开发人员不能为此烦恼,尤其是当jQuery如此容易获得时.

所以基本上,是的,您只能使用CSS制作响应式布局.如果你成功了,恭喜你!JavaScript可以用来使事情变得更容易,但一般来说,如果你认为你需要它,你可能只需要重新思考你是如何做事的.

不幸的是,我没有链接到没有JavaScript的响应式布局,这是因为我非常喜欢DIM-Doin'It Meself!

编辑返回虽然我很欣赏Martijn使用JavaScript来演示图像,根据屏幕大小,图像基本上具有可变分辨率,但如果可能的话,只需使用SVG即可使图像响应.如果这不是一个选项,请考虑使用带有的容器background-image- 只加载与媒体查询匹配的图像:)

Answer 2

有时是,有时没有.

首先要了解什么是响应布局:响应布局是动态改变自身的布局.取决于浏览器的屏幕大小.因此它完全适合每种屏幕类型,大小,分辨率等.因此网站的布局不会破坏.

您可以使用CSS3媒体查询来更改布局,否则您可以使用jQuery或其他一些JavaScript来实现这一点.

但请记住,JavaScript不需要使文档响应.

有时开发人员更好地使用JavaScript编写代码,例如jQuery API.所以他会发现在jQuery中编写代码可以很容易地动态处理浏览器窗口中的所有事件,从而使网站响应.

我自己会发现与CSS相比,在jQuery中编写代码非常容易.所以为了这个目的,我必须将jQuery源文件添加到文档中以这种方式呈现它.否则,我将无法在网站中创建响应,或者必须坚持使用纯JavaScript

示例是:

if($(window).width() > '1300') {
  $('body').css({
    'height': '100%' /* etc */
  });
}

一些开发人员擅长CSS(CSS3及其媒体查询).因此,他们尝试使用CSS3渲染文档并使其响应.

CSS3真的比jQuery容易得多,使用它会很有帮助.它也不需要包含任何脚本文件.您可以在默认的CSS文件中轻松编写代码.并且将相应地做出改变.

@media only screen and (max-width: 1300px) {
  body {
    height: 100%;
  }
}

如果您使用纯CSS然后使用CSS3媒体查询来更改网站的布局,您将能够只检测屏幕大小和其他元素.您将无法检查浏览器的属性或屏幕上的内容等.