阿里云

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

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

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

下面具体的来说一下:


一、CSS语法

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

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

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


二、媒体类型

我们直接说现在可以使用的4种类型。废弃的不做说明了

all

用于所有设备

print

用于打印机和打印预览

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时,小的放上面大的在下面,按照以上写法基本上可以满足产品需求。


喜欢就点个赞吧

发表评论

需要先登录,才能发表评论哦!登录

网友评论
暂无评论