Question

我正在创建一个网站，并且希望我的HTML的一部分在浏览器的宽度大于768px时运行，并且我的HTML的另一部分仅在浏览器的宽度小于或者时才运行等于768px。我读了一篇关于这个here的旧StackOverflow问题，但我不知道如何执行CodinCat建议的JavaScript，因为我没有使用它的经验。（更具体地说，我可以直接在大括号之间插入HTML吗？我究竟要把它放在哪里＆＃34;你的媒体查询＆＃34; - 768px，@ media ...，等等./ >

例如 - 当大于768px时的HTML：

<img src="images/1.png" alt=""/>
<p>Some text</p>

小于/等于768px时的HTML：

<p>Some text</p>
<img src="images/2.png" alt=""/>

Answer 1

<style>

@media (max-width: 768px) {
  .show-large {
    display: none;
  }
}

@media (min-width: 769px) {
  .show-small {
    display: none;
  }
}

</style>


<div class="show-large">
    <img src="images/1.png" alt=""/>
    <p>Some text</p>
</div>

<div class="show-small">
    <p>Some text</p>
    <img src="images/2.png" alt=""/>
</div>

你也应该检查一下这个引导程序：http://getbootstrap.com/css/#responsive-utilities。 Bootstrap具有根据屏幕大小自动显示/隐藏内容的类。它们还有可以根据屏幕大小重新排序内容的类（如段落和图像）。

Answer 2

这可以在没有使用媒体查询的JavaScript的情况下完成：

@media all and (min-width: 768px) {
  .hide-wide {
    display: none;
  }
}

@media all and (max-width: 767px) {
  .hide-narrow {
    display: none;
  }
}

<img class="hide-wide" src="https://placehold.it/300x300/95ECD6/000/?text=<%20768px" alt=""/>
    
<p>Some text</p>
    
<img class="hide-narrow" src="https://placehold.it/300x300/DAC6FF/000?text=>=%20768px" alt=""/>

这里也是一个JSBin演示： http://jsbin.com/dekape/edit?html,css,output

但是，您应该注意，浏览器将下载两个图像，即使其中一个是隐藏的。为了防止这种情况发生，您可以使用srcset或<picture>使用背景图片或更好的响应式图片。这是http://blog.cloudfour.com/responsive-images-101-definitions/

的精彩入门

最后，如果您确实想要根据视口宽度运行JavaScript，那么我最喜欢的库就是http://wicky.nillia.ms/enquire.js/

Answer 3

@Jeff Answers肯定会有所帮助，但是，如果这将是您的开发中反复出现的问题，并假设您将遇到与其他窗口大小相似的情况，我建议您花点时间使用像bootstrap这样的东西。 http://getbootstrap.com/并熟悉媒体查询和响应式设计等术语。

Answer 4

虽然杰夫的回答将完成工作，但是通过让用户下载两个图像，您将对您的用户和服务器造成伤害 - display: none只是隐藏它，它不会阻止它被下载

此外，可访问性（屏幕阅读器）和SEO具有重复内容（即相同的文本两次）会适得其反。如果您只需要它一次，它应该只在标记中出现一次。屏幕阅读器将大声朗读相同的文本两次，而搜索引擎将了解您的页面上有文本两次。

对于重复内容问题和浪费下载问题的理想解决方法，同时仍然能够根据屏幕大小显示2个不同的图像，将使用背景图像而不是图像元素。

您的HTML不会重复：

<div class="box">
  <p>
    This is my text
  </p>
</div>

使用以下CSS，您不会强制用户加载两个图像：

.box {
  height: 280px;
}

/* big screen */
@media (min-width: 769px) {
  .box {
    background: url('http://fakeimg.pl/350x200/00CED1/FFF/?text=big+screen+img') 0 0 no-repeat dodgerblue;
  }
}

/* small screen */
@media (max-width: 768px) {
  .box {
    background: url('http://fakeimg.pl/350x200/FF3399/FFF/?text=small+screen+img') 0 0 no-repeat magenta;
  }
}

See an example CodePen here

浏览器大小更改时使用JavaScript更改HTML？

4 个答案: