如何編輯HTML主題的移動版本？

Question

我已經從網上下載了免費的HTML模板，並且正在嘗試編輯此HTML主題。 在我的主題中，我更改了背景圖片，這對我的計算機和我的分辨率（1366x768）都不錯，但在移動和其他分辨率下效果不佳。 背景圖像粉碎。

請使用您的計算機和手機訪問該網站，以清楚地理解。 主題鏈接

並請幫助我編輯該網站的移動版本。 我什么都找不到。 這是主題文件夾中我的JavaScript文件的列表。 文件圖像

Answer 1

您可以使用的是媒體查詢，其語法如下所示：

@media <What to respond to> { 
    //then place the elements, class and id here
}

媒體查詢可以通過執行@media (max-width:<insert width here>)或@media(min-width:<insert width here>)

可以像@media (max-width:100px) and (min-width:50px)這樣一起使用多個媒體查詢。

另一類媒體查詢可用於指定如何根據設備類型運行，它們包括但不限於：

• 電視
• 屏幕
• 手持
• 所有

通過鍵入@media <name of device>來使用它們。

我提到的其中一些東西被使用的示例

@media screen and (max-width: 100px) and (min-width: 50px) {
 //If the device is a screen, is wider/equal to 50px but smaller
 //than or equal to 100 then it will do this
img {
    width: 75px;
    height: 30px;} }
@media screen and (max-width: 400px) and (min-width: 101px) {
//I'm sure what will happen but i will tell you anyway
//If the device is a screen, is wider than/equal to 101px but
//smaller than/equal 400px
img { //Something
}}

我的建議是閱讀起來就可以看看這里

Answer 2

有很多方法可以解決您的問題。 一種方法是使用媒體查詢更改背景。 這是通過編輯CSS文件來完成的。 如果您有多個CSS文件，則需要知道哪個文件正在設置背景圖片，並將媒體查詢放置在其中。