Question

首先，在编码和PHP方面，我是一个n00b，但我喜欢设计，我喜欢写。问题很有希望简单，我试图寻找答案，并尝试了一些我认为现实的答案，但我似乎无法让它发挥作用。要么根本不发生任何事情，要么与高分辨率不同，要么我做出另一个错误而得到一个空白屏幕：/

我的DIV是：

<div id="logo_float"><a href="/" title="xyz"><img width="192" height="192" src="../img/logo_float.png"></a></div>

div的CSS是：

#logo_float
{
    position: absolute;
    top: 10px !important;
    left: 80px !important;
}

我在某个地方找到了这个部分（看起来非常简单）但我似乎无法让它发挥作用..

if ($(window).width() < 1024) {
    // code for small viewports
} else {
    // code for large viewports
}

我希望我的DIV（浮动徽标）能够在大分辨率屏幕上显示，但是当使用手机，小型平板电脑或一般的低分辨率时，它有点混乱，而我只是想在低分辨率下跳过它。

如果有人在这里可以帮我把这个狗屎放在一起，我将永远感激不尽：）

Answer 1

您可以根据屏幕宽度

创建一个CSS

@media screen and (max-width: 1024px) {
    #logo_float {
      display:none
    }
}

Answer 2

使用media query：

['WP_Image_Editor_Imagick', 'WP_Image_Editor_GD']

它将允许您的元素将显示在高于1024px的屏幕上，并隐藏在小于1024px的屏幕上。

Answer 3

您可能在这里寻找CSS媒体查询。

信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

具体做法是：

@media (max-width: 1000px){
  .your-class {
    display: none;
  }
}

这将在宽度小于1000px的屏幕上隐藏类.your-class的任何内容。

我喜欢在这样做时使用.no-mobile类：

@media (max-width: 720px) {
  .no-mobile{
    display: none !important;
  }
}

Answer 4

也是专业媒体查询。但是如果你需要javascript / jQuery来做到这一点：

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function(){						
    if ($(window).width() < 1024) {
        $('#logo_float').hide();
    } else {
        $('#logo_float').show();
    }
});
$(window).resize(function() {
    if ($(window).width() < 1024) {
        $('#logo_float').hide();
    } else {
        $('#logo_float').show();
    }
});
</script>

＆＃13;

Answer 5

我认为您可以使用CSS媒体查询。您可以隐藏特定分辨率的div。

@media screen and (max-width: 767px) and (min-width: 320px) {
    div#logo_float {
        display: none;
    }
}

这将隐藏div id = logo_float ，分辨率高于或等于320且低于768。

参考链接：http://www.w3schools.com/css/css3_mediaqueries_ex.asp

当分辨率小于

5 个答案: