如何在移动视图wordpress上拥有不同的徽标

Question

在移动设备上查看我的网站时，如何显示不同的徽标？

我对html一无所知，因为经过一些研究，我发现这可以在我的style.ccs中添加一些ccs。

我在Wordpress上工作，但我尝试了不同的方法，没有人为我工作。如果有人可以帮助我为我的网络提供代码，我将不胜感激:)

我的网站 camporecoleta.com.ar，我想在移动设备上加载页面时显示下一个徽标：http://camporecoleta.com.ar/wp-content/uploads/2017/12/Logo-1-1.png

我希望有人可以帮助我，对不起，如果我有任何错误，我的主要语言不是英语

Answer 1

嗯，

可能有很多方法可以做到这一点，但一个简单的方法是普通的旧 css，它@media将根据视口应用不同的样式。

基本上，您可以在元素上使用css背景图像，当屏幕达到指定大小时，会应用另一个具有不同图像的css类。

您也可以只调整同一徽标的大小。

CSS @media规则

Answer 2

您可以通过媒体查询解决问题https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

或尝试函数wp_is_moible()

if ( wp_is_mobile() ) {
    /* Display and echo mobile specific stuff here */
}

https://codex.wordpress.org/Function_Reference/wp_is_mobile

Answer 3

尝试使用这样的CSS media queries：

@media only screen and (max-device-width : 640px)
{
     /* style here apply for screen width up to 640px */
     #logo
     {
         background-image: url('pathToImages/myMobileLogo.jpg');
     }
}
@media only screen and (min-device-width : 640px)
{
     /* style here apply for screen width above 640px*/
     #logo
     {
         background-image: url('pathToImages/myBiggerImage.jpg');
     }
}