CSS3 ????? ??
CSS3? ????? ??? CSS2 ????? ??? ?? ????? ?????. ?, ?? ??? ?? ?? CSS3? ??? ?? ????? ?????.
??? ???
??? ?? ? ??
?? ?? ? ??
??(???? ??, ??)? ?? ??? ??? ???? ? ??? ? ????.
Resolution
?? Apple ???, Android ???, ??? ? ?? ???? ????? ??? ?????.
????? ?? ??
????? ??? ??? ???? ???? ?? ??? ???? ??? ? ????. ???? ??? true?? ??? ?? true ?? false? ?????.
@media not|only mediatype and (expressions) {
CSS-Code;
}
??? ????? ??? ?? ??? ???? ?? ??? ?????. true, ??? ???? ??? ??? ??? ??? ?????.
not ?? only ???? ???? ?? ? ?? ???? ?? ??? ????? ?????.
not: not? @media not print(??? ??)? ?? ?? ?? ??? ???? ? ?????.
only: ?? ??? ??? ???? ? ?????. ??? ??? ???? ??? ??? ?? only ???? ???? ??? ??? ? ????? 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之間 藍(lán)色*/
@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>效果演示，請縮小/擴(kuò)大瀏覽器的窗口大小注意背景色的變化。邏輯如下：</p>
<p>/*寬度500px-800px之間+高度100px-400px之間 藍(lán)色*/</p>
<p>/*寬度小于500px時 綠色*/</p>
<p>/*寬度大于800px時 紅色*/</p>
<p>/*高度小于100px時 黃色*/</p>
<p>/*高度大于400px時 粉色*/</p>
</body>
</html> 
