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

我正在从事web开发，在CSS方面遇到了一些问题。我更多的是一个C++/PHP的家伙，所以这对我来说是一个不同的世界，这让我难以置信。我唯一的CSS问题是定位对象。这就是我的问题所在。我可以很容易地引用复杂的选择器，并查找如何操作某些属性……但定位会让我陷入困境

这不是一个问题，更像是对那些知道自己在做什么的人的呼唤。我完全喜欢响应式网页设计的概念。一、 然而，我个人从未涉足过这一领域（我使用wordpress和响应主题来处理视觉效果——同时编写我需要的内容和插件）响应式网页设计到底涉及到什么？我听说过很多网格系统，这在我脑海中是有道理的。网格系统是页面布局改变的原因吗？怎样我是自己编写代码还是使用现有系统

---

媒体查询呢？我看到了这方面的例子，这让我很惊讶（我完全不理解lol）。通过媒体查询，您似乎可以轻松创建一个响应性强的站点……但网格系统在哪里发挥作用呢？

如果您是这方面的新手，最好的选择是尝试使用其中一个框架来实现响应性。我建议你去看一看

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

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

---

我个人使用媒体查询，并向您推荐，以下是我第一次学习响应式网页设计时使用的一些教程：

---

祝你好运

我在网站上使用的一个资源是Bootstrap。引导将页面分为12个部分。对于每个

元素，您可以选择类似于

.col-md-12

的内容。这将告诉元素占据整个屏幕宽度

如果要使页面响应屏幕大小，可以键入类似于

/* 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) { ... }