Question

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

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

我正在使用Wordpress，但我尝试了不同的方式，没有人为我工作。如果有人可以帮助我使用我的网络代码，我将非常感激：）

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

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

Answer 1

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

Basicaly你可以在一个元素上使用css背景图像，当屏幕达到指定大小时，会有另一个css类，其中有一个不同的图像被应用。

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

CSS @media rule

Answer 2

尝试使用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');
     }
}

Answer 3

您可以使用媒体查询解决您的问题 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

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

3 个答案: