选项1.更改CSS

Question

我有一个链接，我想更改内容＆＃34;发布您的需要＆＃34;到＆＃34;✎＆＃34;当浏览器低于40em宽度时。我已经尝试谷歌搜索半小时无法使用。这里有什么帮助？我正在寻找jquery / javascript。

<a class="postbutton" href='post.php'>Post Your Need</a>

编辑：

所有人的坚持都让我想到了CSS而不是jquery。最后，我使用铅笔图标创建了第二个锚标记，并使用媒体查询将其放在视口上方。因此，当它越过查询行时，较大的标记会以＆＃34; margin-top：-2em＆＃34;向上移动。而较小的一个向下移动。它非常简单，允许我对这两个元素应用单独的CSS规则，当调整浏览器的大小时，上下移动看起来很酷。

Answer 1

选项1.更改CSS

你可以通过css单独实现这一点（sample）：

@media (max-width: 40em) {
    // when smaller than 40em...
    .postbutton {
        // resize postbutton... hiding overflow
        display: inline-block;
        white-space: nowrap;
        overflow-x: hidden;
        width: 13px;    
        color: #000000;
        text-decoration: none;
    }
    .postbutton:before{
        // and insert this text at the beginning
        content: '✎';
    }
}

选项2.更改HTML和CSS

或者，在语义上更好，您可以更改标记和CSS。只需使用以下标记（sample）替换<a class="postbutton">的内容：

<span class="collapsed">✎</span><span class="expanded">Post Your Need</span>

然后你可以用css专门定位那些元素：

.postbutton .collapsed
{
    // hide the collapsed text by default
    display: none;
}
@media (max-width: 40em) {
    // when smaller than 40em...
    .postbutton .collapsed {
        display: inherit; // show the collapsed text
    }
    .postbutton .expanded {
        display: none; // hide the expanded text
    }
}

_{请参阅:before伪元素和CSS Media Queries}

Answer 2

正如代号所说，有一个简单的css选项：媒体查询（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）

但如果您使用jquery设置，则可以通过执行以下操作来获取窗口的宽度：

$(window).width(); // returns the width of the window
// do stuff when the window is resized
$(window).resize(function () {
    $(window).width(); // the new width
});

Answer 3

不确定我是否尝试在em中使用浏览器宽度... 但是为什么不在px中做呢？

var minWidth = 40; // Define minWidth
$(window).resize(function() {
  // Get Browser width in em
  var w = $(window).width() / parseFloat($("body").css("font-size"));
  // Compare Browser width to defined minWidth
  if(w < minWidth) {
    // If Browser window is smaller than the defined minWidth, set small Link Text
    $(".linkClass").html("[new HTML Content]");
  } else {
    // If Browser window is bigger or equal to minWidth, set big Link Text
    $(".linkClass").html("Post your need");
  }
}

注意：未经测试，可能需要一些调整

编辑：哎呀... 40em不是30： - ）

根据浏览器宽度更改链接文本

3 个答案:

选项1.更改CSS

选项2.更改HTML和CSS