JiN's 程式筆記

用法: @media [media type] [query] [(media feature)]

media type [ all , aural , braille , handheld , print , projection , screen ,
 tty , tv , embossed ]
query [ and , not , only ]
media feature [
(max-或min-)width:[數字]  , 
(max-或min-)height:[數字]  , 
(max-或min-)device-width:[數字]  , 
(max-或min-)device-height:[數字] ,  
(max-或min-)resolution:[數字]dpi  , 
(max-或min-)device-aspect-ratio:[比值]  , 
orientation:portrait 或 landscape  ,  (垂直,水平)
aspect-ratio:[比值] ,  
color  , 
color-index  , 
monochrome  , 
scan(只對tv)  , 
grid
]

ex .
單一條件

@media screen and (min-width:768px) {.....}

兩者需同時符合

@media screen and (min-width:768px) and (max-width: 1024px)

兩者符合一種即可

@media screen and (min-width:200px), (max-width:500px)

呼叫方式:

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

CSS內
法1. @media screen and (min-width:768px) {...}
法2. @import "test.css" screen and (min-width:768p)