html - 如何使用 CSS 为桌面和移动浏览器显示单独的图像？

Question

http://tynesideelectrical.co.uk/

在此网站的标题上显示电话号码横幅。从移动设备浏览时，我需要显示“点击通话”图像而不是此号码横幅。

与 CSS 一起使用。

任何希望。?

Answer 1

使用 CSS，您可以通过background-image属性嵌入图像，然后将其与媒体查询相结合，以在桌面和移动设备上加载不同的图像。

/* For desktop */
@media (min-width: 721px) {
  .header {
    background-image: url('img/desktop.png');
  }
}

/* For mobile */
@media (max-width: 720px) {
  .header {      
     background-image: url('img/mobile.png');
  }
}

Answer 2

理论上你可以使用简单的

@media handheld {
    /* rules for mobile phone */    
}
@media screen {
    /* rules for computers */   
}

但是（新的）智能手机假装它们是普通计算机，并且不会在手持设备上做出反应。

没有确切的方法……您只能通过较小的分辨率来识别手机（但似乎不会很长时间）

Answer 3

媒体查询是您的朋友！

您可能想查看： https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

它会检查设备/监视器，并据此更改样式。