【个人总结】流媒体CSS样式怎么写

什么是流媒体、用普通话来说就是针对不同的手机、IPad、平板电脑、宽屏幕设备，使用@media来展示不用的样式。如果是响应式网站，@media的重要性就更为突出了。

流媒体是怎么实现的呢！我们先来了解一个情况，当我们调节浏览器大小的时候，实则页面会依据@media的代码重新渲染。

下面具体的来说一下：

一、CSS语法

第一种写法：在一个css文件中书写不同的设备的流媒体样式；

第二种写法：针对不同的设备，通过stylesheets 在页面加载多个css文件；

总结：建议使用第二种写法，便于维护和管理，更有利于网站的响应。

二、媒体类型

我们直接说现在可以使用的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.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时，小的放上面大的在下面，按照以上写法基本上可以满足产品需求。