CSS3 多媒体查询

2019-07-28 本文已影响17人玩点小技术

CSS2 多媒体类型

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。

例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

但是这些多媒体类型在很多设备上支持还不够友好。

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {  /*css代码*/  }

CSS3 多媒体类型

| all | 用于所有多媒体类型设备 |
| print | 用于打印机 |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |

例子：

屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

<pre style="margin: 0px; padding: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(43, 43, 43); color: rgb(169, 183, 198); font-family: Menlo; font-size: 9pt;">body {
    background-color: pink; }
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
  }

}

<body></body>

</pre>

屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

image

<pre style="margin: 0px; padding: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(43, 43, 43); color: rgb(169, 183, 198); font-family: Menlo; font-size: 9pt;">.wrapper {overflow:auto;}
    #main {margin-left: 4px;}
    #leftsidebar {float: none;width: auto;}
    #menulist {margin:0;padding:0;}
    .menuitem {
        background:#CDF0F6;
  border:1px solid #d4d4d4;
  border-radius:4px;
  list-style-type:none;
  margin:4px;
  padding:2px;
  }
    @media screen and (min-width: 480px) {
        #leftsidebar {width:200px;float:left;}
        #main {margin-left:216px;}
    }
</style></pre>

<pre style="margin: 0px; padding: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(43, 43, 43); color: rgb(169, 183, 198); font-family: Menlo; font-size: 9pt;"><div class="wrapper">
 <div id="leftsidebar">
 <ul id="menulist">
 <li class="menuitem">Menu-item 1</li>
 <li class="menuitem">Menu-item 2</li>
 <li class="menuitem">Menu-item 3</li>
 <li class="menuitem">Menu-item 4</li>
 <li class="menuitem">Menu-item 5</li>
 </ul> </div> <div id="main">
 <p>屏幕可视窗口尺寸大于 480 像素时菜单浮动到页面左侧。</p>
 </div>
 </div>
</pre>

CSS3 多媒体查询

CSS3 多媒体类型

猜你喜欢

热点阅读