响应式 Wordpress 页面 [关闭]答案

【问题标题】：Responsive Wordpress Page [closed]响应式 Wordpress 页面 [关闭]
【发布时间】：2015-01-11 21:51:49
【问题描述】：

您好，我有以下网站：http://mall-haine.ro/ 我不知道如何让它为移动设备调整大小。你能帮我吗？我尝试过像

这样使用 CSS

@media screen and (max-width:480px) {

}

我不明白我应该在那里写什么..

【问题讨论】：

到目前为止你尝试了什么？
我已经尝试过 css 但我无法弄清楚......你能给我一些起点吗？像@media screen 和 (max-width:480px) { main { } 我在里面写了什么？
在浏览器控制台中检查 css 并开始编辑实时编辑样式以找出答案

标签： javascript jquery html css

【解决方案1】：

首先是位：

@media screen and (max-width:480px)

表示大括号内的内容仅适用于屏幕小于或等于 480 像素的设备（即手机，当它们不大于 480 像素时）。因此，在大括号内放置您只想应用于此类手机的 CSS。

它是完全标准的 CSS（除了在这对额外的大括号内），但旨在覆盖您已经为大屏幕指定的内容。为了覆盖大屏幕的东西，它必须在大屏幕的东西之后。所以：

div.sidebar {
    color : red;
    border : 1px solid blue;
}

@media screen and (max-width:480px) {
    div.sidebar {
        color : green;
    }
}

默认 CSS 现在规定，对于所有屏幕，侧边栏 div 将具有红色字体和蓝色边框。

但是对于高达 480 像素的手机，您说过不要使用红色字体，而是使用绿色字体。但是您在媒体查询中没有提及边框，因此在移动设备上将保持蓝色，与台式机相同。

因此，媒体查询仅包含 CSS 规则，其中您想要与您为默认指定的样式不同的样式。媒体查询最常见的用途是在桌面上并排放置内容框，通常在浮动 div 中。在移动设备上没有空间，因此您可以在媒体查询中为较小的屏幕指定float:none;（可以使用平板电脑和手机的最小宽度）。 float:none 强制 div 在另一个下方显示，而不是并排显示，因此内容在小屏幕上会更大，更易读。

我希望这可以很好地说明问题，以便您开始使用。对此进行试验，然后通过 Google 获取更多信息以进行媒体查询。

【讨论】：

【解决方案2】：

试试这个：

@media screen and (max-width:480px) {
 body { font-size:0.7em; }

}

另外，请阅读here

【讨论】：