> 웹 프론트엔드 > HTML 튜토리얼 > media query中的条件重叠_html/css_WEB-ITnose

media query中的条件重叠_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:55:07
원래의
1119명이 탐색했습니다.

  想必接触过响应式布局的朋友对于media query都不会陌生,响应式布局也正是通过这个关键的属性来实现的。一些响应式布局的教程中通常都会进行如下类似设置来实现不同视口宽度条件下的布局示例:

@media screen and (max-width:600px){/* 样式一 */}

@media screen and (min-width:600px) and (max-width:960px){/* 样式二 */}

@media screen and (min-width:960px){/* 样式三 */}

  根据这些教程的解释,这种设置的效果是:当视口宽度小于等于600px时,应用样式一;当视口宽度大于等于600px且小于等于960px时,应用样式二;当视口宽度大于等于960px时,应用样式三。粗看上去没有问题,根据不同视口宽度设置了三种样式效果,但是细看的话问题就来了。上面在描述视口宽度时,都使用了“等于”这个逻辑关系。如果只针对一条规则就没什么好说的了,但600px和960px这两个值都同时满足了两条规则,即满足第一条规则的小于等于600px,又满足第二条规则的大于等于600px,这样便产生了条件重叠的问题。那么当窗口的宽度正好处于600px或960px这种处于分界位置的值的时候,会是怎样呢?

  我们可以进行一个简单的试验,demo很简单,实现的效果是一个

在上述三种像素范围内的颜色切换,重点观察浏览器视口宽度在600px和960px像素时
的颜色到底受哪个media query设置的影响。浏览器宽度采用手动拉伸窗体的方式进行调整,绑定window对象的onresize事件以在console窗口中输出当前的窗口宽度值。

  通过上述试验发现,当浏览器宽度值为600px时,其效果还是停留在样式一的效果上。当宽度调整为601px时,其会变成样式二的效果。也就是说,当一个值作为一个条件的上限的同时又作为另一个条件的下限时,其对于下限条件而言并不包含等于的关系。同理,对于样式三的min-width:960px而言,其含义也是在大于960px的情况下,并不包含等于960px的情况。

  还有一种情况,比如我们想在不同的视口宽度下改变网页元素的布局,比如将横向排列改为纵向排列。当这种页面处于600px或960px这种分界值时,页面元素的排列不会符合css中设置的任何一种规则,具体是什么样子可以自己手动尝试一下。

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿