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

Question

我正在从事 Web 开发，但在 CSS 方面遇到了一些麻烦。我更像是一个 C++/PHP 的人，所以这对我来说是一个不同的世界，这让我感到困惑。 CSS 我唯一的问题是定位对象。这就是我遇到的所有问题。我可以轻松地引用复杂的选择器，并查找如何操作某些属性....但是定位让我无法自拔。

这不是一个问题，更多的是对知道自己在做什么的人的呼唤。我完全爱上了响应式网页设计的概念。然而，我个人从来没有涉足过这个问题（我使用 wordpress 和响应式主题来处理视觉效果——而我编写我需要的内容和插件）。 响应式网页设计到底涉及什么？我听说过很多网格系统，在我的脑海中它是有道理的。网格系统是什么使页面布局发生变化？如何？我是自己编写代码还是使用现有系统？

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

Answer 1

如果您是新手，最好的选择是尝试使用周围的框架之一来尝试实现响应能力。我会建议看看 Bootstrap or 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 有关网格系统、媒体查询、响应式网页设计的问题

CSS questions on grid systems, media queries, responsive web design

css

web