CSS3 ????? ??
CSS3 ????? ??
CSS2 ????? ??
@media ??? CSS2? ?????? ??? ??? ??? ??? ??? ??? ?? ??? ??? ? ????.
?? ?? ??? ??? ??(???, ??? ??, TV ?)? ?? ?? ?? ??? ??? ??? ? ????.
??? ??? ????? ??? ?? ???? ??? ?? ???? ????.
CSS3 ????? ??
CSS3 ????? ??? CSS2 ????? ??? ?? ????? ?????. ?? ??? ?? ?? ??? ?? CSS3 ??? ?????? ????.
??? ??? ??? ?? ??? ??? ???? ? ??? ? ????.
??? ?? ? ?? ?? ?? ? ?? ??(???? ??, ??). ??
?? 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: ?? ???? ?? ? ? ?? ?????.
?? ????? ?? ??? ??? ??? ?? ????.
體CSS3 ????? ?? ? ??
All? ?? ????? ?? ??? ?????.
????? ??? ???? ?? ???? ???? ??? ??? ?? ???? ????. ?? ???? ???? ? ? ?? ? ??? 480???? ? ???? ???? ???????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置瀏覽器窗口查看效果！</h1>
<p>如果媒體類型屏幕的可視窗口寬度小于 480 px ，背景顏色將改變。</p>
</body>
</html> 
