全屏圖像在移動設備上看起來不太好

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; 
     } 
    }