如何编辑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文件，则需要知道哪个文件正在设置背景图片，并将媒体查询放置在其中。