Question

我正在进入Web开发，并且遇到了一些CSS问题。我更像是一个C ++ / PHP人，所以这对我来说是一个不同的世界，这让我很难受。 CSS的唯一问题是定位对象。这就是我遇到的所有问题。我可以很容易地引用复杂的选择器，并查找如何操纵某些属性......但是定位会让我陷入困境。

这不是一个问题，更多的是打电话给知道自己在做什么的人。我完全爱上了响应式网页设计的概念。然而，我个人从未亲自动手（我使用wordpress和响应式主题来处理视觉效果 - 当我编写我需要的内容和插件时）。 响应式网页设计究竟涉及到什么？我听说过很多网格系统，这在我脑海中是有意义的。网格系统是什么使页面布局发生变化？怎么样？我自己编码还是使用现有系统？

媒体查询怎么样？我看到了这个例子，对我来说很神奇（我理解它的零点大声笑）。通过媒体查询，您似乎可以轻松地创建响应式网站......但是网格系统在哪里发挥作用？

Answer 1

如果您是新手，最好的选择是尝试使用其中一个框架来尝试实现目标。我建议您查看Bootstrap或Foundation

但是要回答您的问题，您通常在CSS中使用媒体标签，以便根据用于显示页面的设备应用不同的样式。例如，您可以根据屏幕宽度对元素应用某些位置和大小：

@media (min-width: 996px) {
    #yourelement {
       margin-left: 10px
    }
}

Answer 2

我个人使用媒体查询，并会为您推荐它，这里有一些我第一次学习响应式网页设计时使用的教程：

https://www.youtube.com/watch?v=BIz02qY5BRA
https://www.youtube.com/watch?v=fA1NW-T1QXc

祝你好运！

Answer 3

我在网站上使用的一个资源是Bootstrap。 Bootstrap将页面分为12个部分。对于每个<div>元素，您可以选择与.col-md-12类似的内容。这将告诉元素占据屏幕的整个宽度。

如果您想要根据屏幕尺寸制作页面，可以输入与<div class="col-xs-12 col-sm-6 col-md-3>类似的内容。这就是说，在手机xs上，会有一列。在平板电脑sm上，会有两列。在标准屏幕上，md，您将看到4列。您也可以将lg用于大屏幕。

编辑：要添加有关媒体查询的第二个问题，Bootstrap基于媒体查询。以下显示了每个尺寸所指的内容：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

有关此内容的更多信息，here's a link to Bootstraps CSS section描述了它。

关于网格系统，媒体查询，响应式网页设计的CSS问题

3 个答案: