如果屏幕小于某个宽度，请隐藏div
如果用户屏幕<1024px，我想要隐藏浮动div，因为它将覆盖我的博客内容区域。 我在网上发现了这个jQuery，但我不知道如何使用它。
$(document).ready(function() { if ((screen.width>1024)) { // if screen size is 1025px wide or larger $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide(); } elseif ((screen.width<=1024)) { // if screen size width is less than 1024px $(".yourClass").css('display', 'block'); // here you can also use show(); } }); 如果我的浮动div类名是sharecontent，我应该像下面那样替换上面的脚本吗？ 如果是，它不起作用。
$(document).ready(function() { if ((screen.width>1024)) { // if screen size is 1025px wide or larger $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide(); } elseif ((screen.width<=1024)) { // if screen size width is less than 1024px $(".sharecontent").css('display', 'block'); // here you can also use show(); } });
我也尝试用window.width替换screen.width但仍然没有成功:(
使用媒体查询 。 你的CSS代码是：
@media screen and (max-width: 1024px) { .yourClass { display: none !important; } }
我和你的情况差不多; 如果屏幕宽度小于我指定的宽度，它应该隐藏div。 这是我用过的jquery代码。
$(window).resize(function() { if ($(this).width() < 1024) { $('.divIWantedToHide').hide(); } else { $('.divIWantedToHide').show(); } });
你的代码的问题似乎是elseif语句， else if （注意空格）应该是else if 。
我重写并简化了代码：
$(document).ready(function () { if (screen.width < 1024) { $(".yourClass").hide(); } else { $(".yourClass").show(); } });
在这个例子中，你的逻辑是不是错误的方法，当屏幕大于1024时，你将它隐藏起来。反转案例，将none放入block ，反之亦然。
我遇到的问题是我的css媒体查询和我在Jquery冲突中的IF语句。 它们都被设置为700px，但有人会认为它比另一个高出700px。
为了解决这个问题，我在HTML的顶部创建了一个空的Div（在我的主容器之外）
在css中，我将此div设置为none
#max-width { display: none; }
在我的JS中创建了一个函数
var hasSwitched = function () { var maxWidth = parseInt($('#max-width').css('max-width'), 10); return !isNaN(maxWidth); };
所以在我的IF语句中，而不是说if（hasSwitched <700）执行以下代码，我做了以下操作
if (!hasSwitched()) { Your code } else{ your code }
通过这样做，CSS告诉Jquery它达到700px时。 所以css和jquery都是同步的……而不是像素差异。 请试一试，这绝对不会令人失望。
为了让这个逻辑适用于IE8，我使用了Respond.js插件（这也绝对有效）它允许你使用IE8的媒体查询。 只有不支持的是视口宽度和视口高度…因此我尝试让我的CSS和JS一起工作。 希望这可以帮助你们