更改媒体屏幕使div覆盖 [英] Changing media screen makes div overlay
问题描述
我使用Bootstrap，每个div有4列（col-md-4）。基于带12列的Bootstrap，意味着在PC媒体屏幕中，每行将有三个div。 991px以下的标准是每个4列覆盖整个屏幕。请参阅屏幕截图：
但是，当屏幕大小在600像素和990像素之间时，我希望4列仅覆盖屏幕的50％。意思是每行有两个div。这是我成功的，但也有一些问题。
当在移动肖像（大约<530px）下加载页面时，所有内容都可正确加载。 div不互相覆盖。
当在移动横向或ipad纵向（大约> 740px）加载页面时，所有内容都可正确加载。该div不会互相覆盖。
当从手机画面翻转屏幕到移动景观或相反时，它开始变得陌生。这些div显然是相互重叠的。
我想要的效果是使用以下 CSS 添加：
@media screen and（min宽度：991px）和（最大宽度：1200px）{＃isotope-list img {height：100％; }}
@media screen and（min-width：600px）and（max-width：990px）{＃isotope-list .col-md-4 {width：50％; }＃isotope-list img {height：100％; }}
@media screen和（max-width：599px）{＃isotope-list img {height：auto;当删除这个CSS时，它会回到标准的Bootstrap，并且没有div彼此重叠。这意味着我的CSS和Bootstrap之间的连接必定有问题。这意味着我应该添加一些东西来防止这种情况发生。
该网站可以在这里找到：
解决方案原因是您已将 height：auto 在 img 时屏幕变小 600px 。
您的代码：
@media screen and（max-width：599px）{
＃isotope-list img {
height：auto;
$ b因此，当同位素重新排列元素时，它不会知道你的图像大小，这将导致错误的位置计算。
要解决这是删除身高：汽车然后移除在 .grid图img 上设置的 max-width ，这将消除过渡期间的丑陋。
@media screen and（max-width：599px）{
.grid figure img {
max -width：none;
}
}
剩下的问题是图像会超出宽度它的容器，如下图所示。
我能想到解决这个问题的方法是使用同位素 events ，所以当它完成元素的排列时，你可以将类添加到图像中并使用 max-width：100％
例如
var $ grid = $（' ＃同位素清单）同位素（{...}）。
$ grid.on（'arrangeComplete'，function（event，filteredItems）{
$（。grid figure img）.addClass（imgArranged）;
} ）;
然后，您的最终媒体查询将看起来像这样：
@media screen and（max-width：599px）{
.grid figure img {
max-width：none;
}
.grid图img.imgArranged {
最大宽度：100％;
$ p $更新 - 添加JS的东西 strong>
可以找到同位素的设置 here ，所以当使用同位素事件，这是适当的写在那里。
在你的情况下添加此：
<$ p $
$ container.on（'arrangeComplete'，function（event，filteredItems）{
$（。grid figure img）。 addClass（imgArranged）;
}）;
该文件应该如下所示：
jQuery（function（$）{
var $ container = $（'＃isotope-list'）; // The
$ container.isotope（{//同位素选项，'item'匹配PHP
中的类itemSelector：'.item'，
layoutMode： 'masonry'
}）;
//在转换完成时添加类
$ container.on（'arrangeComplete'，function（event，filteredItems）{
$（。grid figure img）。addClass（imgArranged）;
}）;
//将选中的类添加到被点击的项目中，并从其他项目中删除
var $ optionSets = $（'＃filters，＃filters-undercat'），
$ optionLinks = $ optionSets.find（'a'）;
$ optionLinks.click （function（）{
var $ this = $（this）;
//如果已经选择了
if（$ this.hasClass（'selected'））{
回报false;
}
var $ optionSet = $ this.parents（'＃filters'）;
$ optionSets.find（'。selected'）。removeClass（'selected'）;
$ this.addClass（'selected'）;
//单击一个项目时，对项目进行排序。
var selector = $（this）.attr（'data-filter'）;
$ container.isotope（{
filter：selector
}）;
返回false;
}）;
}）;
I am using Bootstrap and the divs are 4-columns each (col-md-4). Based on Bootstrap with 12-columns it means that in the PC media screen it would be three divs at each row. Below 991px it's standard that each 4-columns covers the whole screen. Please see screenshot:
However, I want the 4-columns to only cover 50% of the screen when screen size is between 600px and 990px. Meaning there are two divs at each row. This is something I have succeeded in, but there are some issues.
When loading the page at mobile portrait (approx < 530px) everything loads correctly. The div does not overlay each other.
When loading the page at mobile landscape, or ipad portrait (approx > 740px) everything loads correctly. The div does not overlay each other.
When flipping the screen from either mobile portrait to mobile landscape or opposite it's starting to act strange. The divs are clearly overlaying each other.
The effect I want has been adding by using the following CSS:
@media screen and (min-width: 991px) and (max-width: 1200px) { #isotope-list img { height: 100%; } }
@media screen and (min-width: 600px) and (max-width: 990px) { #isotope-list .col-md-4 { width: 50%; } #isotope-list img { height: 100%; } }
@media screen and (max-width: 599px) { #isotope-list img { height: auto; }}
When removing this CSS it goes back to standard Bootstrap and there are no divs overlaying each other. This means there must be something wrong with the connection between my CSS and Bootstrap. Meaning there should be something I could add to prevent this from happening.
The site can be found here: http://goo.gl/9IsTIl
Here is the HTML/PHP if needed:
<div class="col-md-12">
<div id="isotope-list">
<div class="item col-md-4">
<div class="content grid lefttext">
<figure class="effect-lily">
<!-- image -->
<figcaption>
<!-- caption -->
</figcaption>
</figure>
</div>
</div>
</div>
</div>
Edit:
The script that may interfare with the CSS: http://goo.gl/NnLwgo
Edit 2:
This is the following I get when going from portrait to landscape in android browser on mobile:
解决方案 Reason is that you have set height: auto on the img when the screen goes lower 600px.
Your code:
@media screen and (max-width: 599px) {
#isotope-list img {
height: auto;
}
}
So when isotope rearrange your elements, it won't know your image sizes which will cause miscalculation of the positions.
To fix that is to remove that height: auto then remove the max-width being set on .grid figure img which will remove the ugliness during the transition.
@media screen and (max-width: 599px) {
.grid figure img {
max-width: none;
}
}
The problem left is that the image will exceed the width of it's container, as you can see in the image below.
What I can think to fix this is to have a good use of the isotope events so when it finishes arranging the elements, you add class to the images and set it with max-width: 100%.
e.g.
var $grid = $('#isotope-list').isotope({...});
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
$(".grid figure img").addClass("imgArranged");
});
Then on your final media query will have to look like this:
@media screen and (max-width: 599px) {
.grid figure img {
max-width: none;
}
.grid figure img.imgArranged {
max-width: 100%;
}
}
Update - Adding the JS stuff
The settings for your isotope can be found here, so when using the isotope events, it would be appropriate to write it there.
In your case add this:
// Add class when transition is finished
$container.on( 'arrangeComplete', function( event, filteredItems ) {
$(".grid figure img").addClass("imgArranged");
});
That file should look like this now:
jQuery(function($) {
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector: '.item',
layoutMode: 'masonry'
});
// Add class when transition is finished
$container.on( 'arrangeComplete', function( event, filteredItems ) {
$(".grid figure img").addClass("imgArranged");
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters,#filters-undercat'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
这篇关于更改媒体屏幕使div覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
