Question

我的网站http://asebratenpark.no获得了一个带有全屏照片的主页（主索引文件）。我真的很喜欢它在台式机上的外观。但真的不喜欢它在智能手机上的外观。

我正在考虑使用查询来移除智能手机上的全屏规则。

这是个主意吗？如果是的话，我对如何继续进行有点不确定。

Answer 1

一些可能的解决方案：

1）使用CSS中的媒体查询加载较小的图像（无论如何你应该这样做），以便像这样：

@media only screen
and  (max-width: 640px)
{
    .background {
        background-image:url('ultrasmall.jpg');
    }
}
@media only screen
and (min-width : 641px) and (max-width: 800px)
{
   .background {
    background-image:url('smaller.jpg');
    } 
}

等。其他屏幕/窗口尺寸。

2）

您还可以使用CSS3图像尺寸规则将图像设置为适合屏幕尺寸，以便background-size: cover;或background-size: contain;最适合您的需要。

请参阅http://www.w3schools.com/cssref/css3_pr_background-size.asp

@media only screen
    and  (max-width: 640px)
    {
        .background {
            background-image:url('ultrasmall.jpg');
            background-size:cover;
        }
    }

全屏图像在移动设备上看起来不太好

1 个答案: