Question

自2009年以来，我一直在从事网页设计，现在我很难用HTML和CSS编写现代版画。我将解释我的问题：当我开始使用网页设计时，过程首先在Photoshop或Fireworks中创建一个模型，然后查看模型以选择所需的度量，颜色和最终图像。

设置具有一定宽度的元素没有问题，因为我们只计划了一个分辨率。下面的解决方案需要水平滚动，上面的分辨率会看到空白内容。此外，如果一个元素应该是另一个20像素，那么设置边距顶部就没有问题。

现在有来自响应式设计的所有现代东西等等，其中现代布局应该适应分辨率。如果像过去那样继续工作，那似乎有点令人困惑。此外，我已经研究过CSS最佳实践，现在我发现了很多关于ID的使用和类的更多使用等等的事情，这些事情在我开始时我似乎没有。

是否有一些很好的资源，如视频和教程，可以很好地了解这些现代实践？

Answer 1

我相信简短的回答是＆＃34;没有。＆＃34;这没有用，所以我将分享我所做的一些似乎正在发挥作用的事情。

我一直在通过以相同的方式开发页面来处理这个问题，但现在您还必须确定适当的移动版本可能是什么样子。我通常首先确保在标题中使用此元标记：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

然后CSS有这样的东西：

body {width: 1000px; margin: 0 auto; }
@media only screen and (max-width: 600px) {
    body {width: auto; }
    /* All other mobile styles go here*/
    img.superfluous {display: none; }
}

这将采用浮动的固定宽度布局，并在事情变得过于紧张时将其全屏显示。移动设计可能从3列布局转变为1列布局。您最强大的工具是隐藏尽可能多的多余图形。 iPhone上没有空间。然后将所有内容叠加在一起。

如果您是开发模型的人，我强烈建议您跳过Photoshop并在HTML / CSS中制作原型。这样，您就可以同时处理桌面版和移动版。

老实说，我不知道你在读什么，但它让我担心它建议使用更少的ID和更多的课程。这听起来像废话或更糟糕的，面向对象的CSS。继续专注于编写可维护和模块化的代码。

Answer 2

对不起我的英语质量有一定数量的资源可供使用，其中包括Ethan Marcotte的网站，法国网站创作者的书籍alsacreation ...
但也有推特账号，如Hey Designer，CSS-Tricks，Hugo Giraudel，Tutorialzine Raphael Goetter ...... 名单很大。继续密切关注行业新闻。
其他技术也可以作为Sass和Compass使用。

使用HTML和CSS编写现代布局

2 个答案: