艾Q网

标题: 如何使用CSS @media 规则，匹配不同尺寸屏幕 [打印本页]

作者: admin 时间: 2023-11-22 16:05
标题: 如何使用CSS @media 规则，匹配不同尺寸屏幕
如果浏览器窗口的宽度为 768px 或更小时，把 <body> 元素的背景颜色更改为“浅蓝色”：

@media only screen and (max-width: 768px) {  body { background-color: lightblue;  }}

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

CSS 语法
@media +（and | not  | only） + 媒体类型 +（and+ 媒体查询）{  CSS-Code;}

（and+媒体查询），这个是用来限制查询条件的，例如当屏幕小于最大宽度时，@media中的class就起作用了

not、only 和 and 关键字的含义：
not 还原整个媒体查询。
only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。
and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。
/* iPhone Portrait */手机竖排
      @media screen and (max-device-width: 480px) and (orientation:portrait) {
         #leftside{width:11%;}
      }

      /* iPad Portrait */手机竖排
      @media screen and (min-device-width: 481px) and (orientation:portrait) {
         #leftside{width:16%;}
      }
      /* iPad Landscape */IPAD横排
      @media screen and (min-device-width: 481px) and (orientation:landscape) {
         #leftside{width:16%;}
      }

@media还可以针对不同的媒体使用不同的样式表，就像这样：

<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css">....

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)