什麼是流媒體？用普通話來說就是針對不同的手機、IPad、平板電腦、寬屏幕設備，使用@media來展示不用的樣式。如果是響應式網站，@media的重要性就更為突出了。
流媒體是怎麼實現的呢！我們先來了解一個情況，當我們調節瀏覽器大小的時候，實則瀏覽器會依據@media的樣式代碼重新渲染頁面，從而顯示了不同的效果。
css
下面具體的來說一下：
一、寫法
第一種寫法：在一個css文件中書寫不同的設備的流媒體樣式；
第二種寫法：針對不同的設備，通過stylesheets在頁面加載多個css文件；
總結：建議使用第二種寫法，便於維護和管理，更有利於網站的響應。
二、媒體類型
我們直接說現在可以使用的4種類型。廢棄的不做說明了。
這4種類型中，我們最為常用的就是screen，針對電腦屏幕，平板電腦，智能手機等。
三、 關鍵字
and：該關鍵字是用來聯合某種制定的媒體類型；
not：該關鍵字是用來排除某種制定的媒體類型；
only：用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會被採用。
四、使用示例
1、支持單媒體類型
@media screen { p{font-size:14px;} }@media print { p{font-size:10px;} }
2、多個媒體類型共同使用
@media screen,print { p{font-weight:bold;} }
3、在單個媒體類型中限定設備類型使用
@media only screen and (max-width: 500px) {.gridright {width:100%;}}
五、 常用媒體類型舉例
我們以媒體類型screen為例，這是我們在書寫流媒體時最常用的類型。看一下示例代碼：
小於等於1440的設備
@media only screen and(max-width:1440px){}
小於等於1366的設備
@media only screen and(max-width:1366px){}
小於等於1280的設備
@media only screen and(max-width:1280px){}
小於等於1024的設備
@media only screen and(max-width:1024px){}
小於等於768的設備
@media only screen and(max-width:768px){}
小於等於640的設備
@media only screen and(max-width:640px){}
小於等於480的設備
@media only screen and(max-width:480px){}
小於等於320的設備
@media only screen and(max-width:320px){}
總結：用max-width那麼就是大的在上面，小的在下面，如果用min-width時，小的放上面大的在下面，按照以上寫法基本上可以滿足產品需求。
閱讀更多 申霖ink 的文章
