CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有想法： 取代了查找裝置的類型，CSS3 根據設定自適應顯示。
媒體查詢可用於偵測許多事情，例如：
viewport(視窗) 的寬度與高度
裝置的寬度與高度
朝向(智能手機橫屏，垂直屏) 。
解析度
目前很多針對蘋果手機，Android 手機，平板等裝置都會使用到多媒體查詢。
多媒體查詢語法
#多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立回傳true 或false。
@media not|only mediatype and (expressions) {
CSS-Code ;
}
如果指定的多媒體類型符合裝置類型則查詢結果傳回true，文件會在符合的裝置上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有裝置上顯示效果。
not: not是用來排除掉某些特定的設備的，例如 @media not print（非列印設備）。
only: 用來定某種特別的媒體類型。對於支援Media Queries的行動裝置來說，如果存在only關鍵字，行動裝置的網頁瀏覽器會忽略only關鍵字並直接根據後面的表達式應用程式樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type類型的網頁瀏覽器，遇到only關鍵字時會忽略這個樣式檔。
all: 所有設備，這個應該經常看到。
實例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
/* 小于200px*/
@media only screen and (max-width:200px ) {
#p{
background: red;
}
}
/* 大于300px*/
@media only screen and (min-width:300px ) {
#p{
background: yellow;
}
}
</style>
</head>
<body>
<p id="p">小于200px背景变红色大于300px背景为黄色</p>
</body>
</html>實例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
/body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/
@media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/
@media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/
@media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/
@media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/
</style>
</head>
<body>
<p>效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：</p>
<p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p>
<p>/*宽度小于500px时 绿色*/</p>
<p>/*宽度大于800px时 红色*/</p>
<p>/*高度小于100px时 黄色*/</p>
<p>/*高度大于400px时 粉色*/</p>
</body>
</html>
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php.cn</title>
<style>
.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:14px;
padding:12px;
}
@media screen and (min-width: 300px) {
#leftsidebar {width:200px;float:right;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">php</li>
<li class="menuitem">js</li>
<li class="menuitem">css</li>
<li class="menuitem">html</li>
<li class="menuitem">ios</li>
</ul>
</div>
<div id="main">
<p>在屏幕可视窗口尺寸小于 300 像素时将菜单浮动到页面右侧。</p>
</div>
</div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 