Question

我从网上下载了一个免费的HTML模板，我试图编辑这个HTML主题。在我的主题中，我更改了背景照片，它在我的计算机和我的分辨率（1366x768）上表现不错，但在移动设备和其他分辨率上它的效果不佳。背景图像正在破碎。

请使用您的计算机和手机访问该网站，以便清楚了解。 Theme link

请帮我编辑本网站的移动版本。我找不到任何东西。这是我在主题文件夹中的javascript文件列表。 image of files

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)一样使用。

另一类媒体查询可用于指定根据设备类型的行为方式，包括但不限于：

TV
屏幕
手持
所有

键入@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
}}

我的建议是仔细阅读here

Answer 2

有很多方法可以解决您的问题。一种方法是使用media queries更改背景。这是通过编辑您的css文件来完成的。如果您有多个css文件，则需要知道哪个是设置背景图像并将媒体查询放在那里。

如何编辑HTML主题的移动版本？

2 个答案: