Question

我以前从未这样做过。我刚刚建造的网站是我建造的第二个网站。有一个主容器div和一个标题。我注意到这个简单的html / css和js网站在移动设备上看起来很糟糕。

当谈到使网站流畅时，是否有任何规则或方法使其快速简便？如果我刚开始将所有设置的像素宽度更改为百分比，那么元素会相互失去对齐吗？例如，主图像滑块中的图像使用像素根据标题中徽标的位置进行对齐。

在开始之前，我们非常感谢任何指针。这是网站：www.hauswoods.com

Answer 1

我建议您查看media queries，这样您就可以指定与不同屏幕尺寸相关的CSS。是的，您可以将您的网站更改为流畅/流畅的布局，但使用您当前的内容，让滑块和图像看起来正确将是一个令人头痛的问题。

Answer 2

快速简便的方法是使用像Bootstrap这样的框架（http://twitter.github.com/bootstrap/）

我确信有些人会争辩说如果你使用它会不会学习（因为它会为你做很多事情），但我认为你可以通过实例学习。

Bootstrap使用渐进增强原则来改进UI并使用称为“Less”的东西来使CSS更通用（以牺牲一些复杂性为代价）。不过，你可以使用你喜欢的任何一个比特。如果你有一个绿地网站，这是一个很好的起点。它支持流体布局，并向您解释如何在屏幕较小的移动设备上降低设计性能。

Answer 3

那里有很多很好的教程：

Answer 4

以下是恕我直言的一些最好的JS框架/ html5-templaters，它们可以帮助你实现目标。无需重新发明轮子。

Answer 5

如果您希望您的网站流畅，只需使用百分比而不是像素。

.classname{
    width: 80%;
}