调整浏览器大小时如何删除或隐藏此 ？答案

【问题标题】：How to remove or hide this when resize the browser?调整浏览器大小时如何删除或隐藏此 ？
【发布时间】：2018-11-27 05:57:32
【问题描述】：

这是一个带有“购物车”段落的购物车图标。调整浏览器大小时，我想隐藏或删除“购物车”段落，只显示购物车图标。我尝试了很多不同的方法，但仍然无法做到。我出来了三种方式： 1.使用css选择器。并使用媒体查询隐藏 p 元素。

@media only screen and (max-width: 600px) {
 body {
    background-color: lightblue;
 }
}

2.调整浏览器大小时使用JS去除p元素。

3.同样使用JS添加一个新的图标元素来代替原来的元素。

但我不知道它们究竟是如何工作的，请帮助我，非常感谢~

这就是我正在做的事情:)

 <p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart</p>

【问题讨论】：

stackoverflow.com/questions/28712561/…的可能重复

标签： javascript html css web

【解决方案1】：

您的p 标签包含两个元素：

文本购物车
FontAwsome 使用i 标签创建包含图标的伪元素

所以要隐藏文本并保留图标，您可以使用简单的 css

看这个例子

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  p {
    font-size: 0 !important;/*hide the text using font-size*/
  }
  .fa.fa-shopping-cart {
    font-size: 15px; /*show the icon using font-size*/
  }
}

/* This style is used for the example */

  p {
    font-size: 0 !important;/*hide the text using font-size*/
  }
  .fa.fa-shopping-cart {
    font-size: 15px; /*show the icon using font-size*/
  }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p style="black:white;font-size:14px;font-family:Roboto; onclick=" myFunction() "><i class
  ="fa fa-shopping-cart " style="color:black; "></i> Cart</p>

【讨论】：

【解决方案2】：

编写一个媒体查询并为您的 p 提供 someClass 或通过您自己的方式访问它  标签。

@media only screen and (max-width: 600px) {
 p.someClass {
    display:none;
 }
}

更新复制下面的代码（标签外标签）

<p class="someClass" style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"></p><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart

【讨论】：

抱歉显示：无'
@SaugatBhattarai 仔细阅读她的问题。你错过了什么。
可能是我错了还是他/她稍后更新了问题？
@NirajKaushal 你能告诉我我错过了什么吗？
@SaugatBhattarai When browser is resized, I want to hide or remove the "cart" paragraph and only show the shopping-cart icon. 但在您的代码中它将隐藏图标和文本。

【解决方案3】：

有两种方法可以在调整大小的浏览器上使用 js 来完成您的任务，第二种是通过 css。根据我的说法，css 是解决这个问题的完美方式。我正在为你提供两种解决方案。

<!DOCTYPE html>
<html>
<head>
@media (max-width:991px){.cart span{display:none}}
</head>
<body>
<p class="cart"><i class="fa fa-cart"></i><span>Cart</span><p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(window).resize(function(){
var winW = $(window).width();
if(winW <= 991){
$('.cart span').hide();
}else
{
$('.cart span').show();
}
});
</script>
</body>
</html>

【讨论】：

【解决方案4】：

将Cart 文本包装在span 标记内，并为该类添加hidden-sm 类和CSS，如下所示。

@media only screen and (max-width: 600px) {
 body {
    background-color: lightblue;
 }
 .hidden-sm{
    display:none;
 }
}

<!--Demo Purpose-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
  ="fa fa-shopping-cart" style="color:black;"></i> <span class="hidden-sm">Cart</span></p>

【讨论】：