Responsive Wordpress頁面

Question

嗨，我有以下網站：http://mall-haine.ro/ 我無法弄清楚如何使其移動設備的大小調整。 你能幫我嗎？ 我曾嘗試使用CSS像

@media屏幕（最大寬度：480像素）{

}

，我不知道我應該怎麼寫有..

Answer 1

試試這個：

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

}

，並閱讀here

Answer 2

首先，位：

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

意思如下內的括號將僅在設備上更少申請與屏幕大於或等於480像素（即手機，當他們沒有比這更大）。因此，在大括號內部，您只需要將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;（可以使用最小寬度，可以使用平板電腦以及手機）。 float：none強制div顯示一個在另一個之下，而不是並排顯示，因此內容在小屏幕上會更大，更易讀。

我希望這可以解釋一些事情，以便您開始使用。嘗試一下，然後進一步瞭解Google對媒體查詢的信息。