Question

我有这个网页，我试图做出回应，我是RWD（媒体查询......等）的初学者，尽管我有HTML和中等水平的知识。 CSS。这是zip文件中的网页。

任何人都可以帮我解释如何让它变得敏感，详细而简单的解释肯定会对像我这样的新手有所帮助。

问候。

Answer 1

响应式设计的几个关键：

用百分比和最大宽度替换固定宽度。这可能是最重要的事情，同时理解和利用媒体查询。例如，如果您的主体宽度是960px，那么您的CSS

.Body { width: 960px }
.LeftSide { width: 640px }

变为

.Body { width: 100%; max-width: 960px; }
.LeftSide { width: 66.667%; max-width: 640px; } /* width percentage is found by dividing 640/960 */

依此类推。一旦您的屏幕达到一定的宽度，您就会想要添加媒体查询，以使大多数/所有元素都能阻止＆＃39;阻止＆＃39;宽度为95-100％。所以在上面的例子中，你会＆＃34; .LeftSide＆＃34;对较小屏幕的媒体查询：

@media screen and (max-width: 480px)
{
     .LeftSide{ width: 100%; display: block; }
}

更改显示：内联显示：最终阻止所有元素，垂直堆叠移动设备。何时执行此操作取决于您的页面布局，但我已经在640px左右完成了它。例如：

.items { display: inline; }

@media screen and (max-width: 640px)
{
     .items { display: block; }
}

在移动设备上，菜单布局，页眉和页脚等都很可能以垂直方块显示。我会查看很多响应式网站，看看你喜欢什么，不喜欢，并保持简单的开始。我还很陌生，喜欢和RWD一起练习很多。

另外，如果您还有填充物，请注意95-100％的宽度。我知道这可能是基本的CSS，但是由于填充了几个像素，它让我在手机底部看到水平滚动条时出现了一些不必要的麻烦。

编辑：并且不要忘记视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

还有其他选项，有些让你放大，我不相信这个（在手机上）。但是如果没有这个，就我所知，在手机或平板电脑上，你的媒体查询都不会有效。

祝你好运！