对于使用 HTML5 和 CSS3 的响应式网站来说，javascript 有多重要 [关闭]答案

【问题标题】：How much important is javascript for responsive websites with HTML5 & CSS3 [closed]对于使用 HTML5 和 CSS3 的响应式网站来说，javascript 有多重要 [关闭]
【发布时间】：2014-09-04 02:25:57
【问题描述】：

没有.js就不能创建响应式网站吗？谁能分享我的资源，我可以从头开始学习创建响应式网站。

【问题讨论】：

标签： javascript html css responsive-design media-queries

【解决方案1】：

您不需要 JavaScript 来创建响应式布局。你唯一需要的是用 HTML 编写好的 CSS。

为了在响应式布局中获得更大的灵活性，我们经常使用@media 查询。然而，这些在旧版浏览器 (IE8) 中是 not supported。要添加对媒体查询的支持，我们可以使用 polyfils（添加对旧浏览器中缺少的属性的支持的一小段 javascript）。

编辑：

回答您的问题：正如乔纳斯已经指出的那样，没有“最佳”标准。在响应式设计中有两种方法：移动优先或桌面优先。

移动优先意味着，您首先要让它在小屏幕上看起来不错。然后你开始扩大屏幕尺寸，直到它看起来像 sh*t。在那里您添加一个“断点”并使用@media 选择器添加额外的样式，直到它看起来不错。然后你重复扩展 - 修复过程。

Desktop first 是完全一样的，但在这里你首先从大屏幕开始。你把屏幕变小，直到它看起来像 sh*t，用 @media 选择器修复它并重复。

【讨论】：

谢谢@Pinoniq。我们必须针对哪些标准媒体查询。
我认为“标准媒体查询”是个坏习惯。您需要根据何时有意义来决定媒体查询（以保持页面的可读性和美观）
@Prashanth-Design 我编辑了我的答案

【解决方案2】：

是的，您可以在您的 css 文件中或调用它们时使用媒体查询。

我将我的 css 文件分开并将它们命名为 layout_desktop、layout_mobile 和 layout_tablet。

<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="layout_desktop.css" />

Here is the reference

更新

如果您想在一个 CSS 文件中执行此操作，您可以围绕某些代码块添加查询，如下所示：

@media screen and (min-width: 400px) and (max-width: 700px) { /* CSS code goes here */ }

【讨论】：

感谢@josh，我喜欢 CSS 文件的命名。但是如果我将所有媒体查询都写在一个 common.css 文件中会不会有问题
@Prashanth-Design 请查看更新后的答案
感谢@Josh，我对“最小宽度”和“最大宽度”以及更多内容感到困惑。如何理解这个媒体查询。我在哪里可以详细研究媒体查询。
@josh 不要指 w3schools（傻瓜）... mozilla 是该去的地方：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【解决方案3】：

是的，这是可能的！它甚至更好恕我直言。响应性只是编写适应屏幕大小的样式表 (CSS) 的艺术。一般准则是使用百分比宽度而不是像素。我通常做的是在主容器上设置一个最大宽度：

.wrapper {
    max-width: 1260px;
    width: 100%;
}

这看起来像是一个完整的指南http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

【讨论】：

谢谢@Jonas。链接很有帮助

【解决方案4】：

在大多数情况下，JS 用于交互。 CSS 用于控制响应能力——也就是说，根据视口大小和/或方向以不同方式（或根本不！）显示元素。

http://www.adamkaplan.me/grid 或 Bootstrap 或 Foundation 等框架是一个很好的入门资源。

【讨论】：