【个人总结】流媒体CSS样式怎么写
什么是流媒体、用普通话来说就是针对不同的手机、IPad、平板电脑、宽屏幕设备，使用@media来展示不用的样式。如果是响应式网站，@media的重要性就更为突出了。
流媒体是怎么实现的呢！我们先来了解一个情况，当我们调节浏览器大小的时候，实则页面会依据@media的代码重新渲染。
下面具体的来说一下：
一、CSS语法
第一种写法：在一个css文件中书写不同的设备的流媒体样式；
第二种写法：针对不同的设备，通过stylesheets 在页面加载多个css文件；
总结：建议使用第二种写法，便于维护和管理，更有利于网站的响应。
二、媒体类型
我们直接说现在可以使用的4种类型。废弃的不做说明了
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕，平板电脑，智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
这四种类型中，我们最为常用的就是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.test {font-family:verdana,sans-serif;font-size:14px;} }
@media print { p.test {font-family:times,serif;font-size:10px;} }2、多个媒体类型共同使用
@media screen,print { p.test {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时，小的放上面大的在下面，按照以上写法基本上可以满足产品需求。
