You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@media only screen and (min- 620px) and (max-width: 930px) @media only screen and (max- 620px)
上述2个规则,当屏幕宽度在620px以下,和620px-930px,使用的contain样式是不同的。
截图:
当浏览器宽度在1024px的情况下,显示效果如下:
当浏览器宽度在680px的情况下,显示如下:
当浏览器宽度在480px的情况下,显示如下:
The text was updated successfully, but these errors were encountered:
CSS中@规则是由@符号开始的,例如@import,@page等。
@media就是其中的一个规则。
@media可以让你根据不同的屏幕大小而使用不同的样式,这可以使得不需要js代码就能实现响应式布局。
不过@media只能用于较新的浏览器,对于老式的IE,不支持。下面是@media支持的浏览器。
@media的语法比较简单,一眼就能看懂。
@media mediatype and|not|only (media feature) {
CSS-Code;
}
可以参考http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html值的说明。
其中mediatype就是媒体类型,可以包括好多种,最常用的就是screen,其他多数已经作废。
media feature就定义了这个media设备的一些特征,简单的说就是媒体满足什么条件,常用的就是max-width,min-width。
通过指定屏幕的大小,而采用不同的样式。
举个例子演示如何用@media规则实现响应式布局。
@media only screen and (min- 620px) and (max-width: 930px)
@media only screen and (max- 620px)
上述2个规则,当屏幕宽度在620px以下,和620px-930px,使用的contain样式是不同的。
截图:
当浏览器宽度在1024px的情况下,显示效果如下:
当浏览器宽度在680px的情况下,显示如下:
当浏览器宽度在480px的情况下,显示如下:
The text was updated successfully, but these errors were encountered: