响应式WordPress页面

Question

您好我有以下网站：http://mall-haine.ro/ 我无法弄清楚如何为移动设备调整大小。 你能帮帮我吗？  我试过使用像

这样的CSS

@media screen and（max-width：480px）{

}

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

Answer 1

首先，位：

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

表示大括号内的内容仅适用于屏幕小于或等于480px的设备（即移动设备，当它们不大于此值时）。因此，在大括号内，您只需要将CSS应用于此类手机。

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

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

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

默认的CSS现在说，对于所有屏幕，侧边栏div将有一个红色字体和蓝色边框。

但是对于高达480px的手机，你说不要使用红色字体，而是使用绿色。但是你对媒体查询中的边框一无所知，因此在移动设备上与桌面设备一样保持蓝色。

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

我希望这能够很好地解释你的事情。试验一下，然后谷歌进一步了解媒体查询。

Answer 2

试试这个：

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

}

另请阅读here