十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下CSS中媒体类型的使用方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联公司主营丰宁网站建设的网络公司,主营网站建设方案,App定制开发,丰宁h5小程序定制开发搭建,丰宁网站营销推广欢迎丰宁等地区企业咨询
根据Web网站的不同,网页的错误会以非预期的形式出现,例如打印时的布局折叠,但在媒体类型中,可以设置它以避免它,这意味着您可以创建用于打印的页面,输出到投影仪的页面等。
如何使用CSS媒体类型?
媒体类型可以用两种方式编写。
第一种方式
第二种方式
@media screen{ /*screen的内容*/ }
第一个使用根据媒体类型更改应用的CSS。
第二种是在CSS中为每种媒体类型编写的设置
由于有时大量的CSS代码时,有一些变化时很难更改,所以建议使用第一种方式,但这次我们以第二种方式为例介绍CSS媒体类型。
我们先来简单看一下CSS中常用的几种媒体类型
screen(屏幕)
print(打印)
tv(电视)
projection(投影仪)
all(全部)
当使用两个媒体类型时可以用逗号分隔开,下面我们来看具体的示例
代码如下
HTML代码
媒体类型 Sample
根据媒体的不同,背景颜色会改变
screen : 平常显示 : #d9534f(红色)
print : 打印时显示: #5bc0de(蓝色)
CSS代码
sample.css
@media all{ p{ color:#000000; } } @media print{ body{ color: #5bc0de; } } @media screen{ body{ color: #d9534f; } }
执行上述代码在浏览器页面上显示如下效果
Sample为红色
当进行打印预览时,浏览器上显示如下所示效果
Sample变为蓝色
看完了这篇文章,相信你对CSS中媒体类型的使用方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!