Question

如果没有.js，是否无法创建响应式网站？任何人都可以分享我的资源，我可以从头开始学习创建响应式网站。

Answer 1

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

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

Answer 2

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

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

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

Answer 3

是的，您可以在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 */ }

Answer 4

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

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

修改：

回答你的问题：正如乔纳斯已经指出的那样，没有“最佳”标准。在响应式设计中，有两种方法：首先是Mobile，或者是Dekstop。

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

桌面首先完全相同，但在这里你先从大屏幕开始。你让屏幕更小，直到看起来像sh * t，用@media选择器修复它并重复。

对于HTML5和＆amp ;;的响应式网站，javascript有多重要？ CSS3

4 个答案: