根据页面宽度在我的页面上显示元素 [英] Displaying elements on my page depending on the page width

问题描述

我想根据页面宽度调整视图中显示的元素。假设页面宽度大于800像素，那么我想显示div A + div B（见下图）。

I would like to adjust elements displayed on my view depending on the width of the page. Let's say the page width is greater than 800 px, then I would like to display div A + div B (see picture below).

但如果页面宽度小于或等于600像素，那么我只想显示div A。

But if the page width is less or equal than 600 px,then I would like to display only div A.

它必须是动态的。因此，如果用户调整窗口大小，则必须显示或隐藏div B。

It has to be dynamic. So If the user resize the window, the div B must be showed or hided.

一个jQuery解决方案？

A jQuery solution?

感谢。

推荐答案

使用媒体查询！

@media screen and (max-width: 799px) { 
    #b {
        display:none;
    }
}

jsfiddle

这篇关于根据页面宽度在我的页面上显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！