web前端媒体查询的知识点

使用媒体查询

语法: @media 查询规则{}

媒体类型:

al1 所有设备

print 打印设备

screen 带屏幕的设备

speech 屏幕阅读器

-可以使用，连接多个媒体类型，这样它们之间就是一个或的关系

可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器

<style>

@media all{

body{

background-color:#bfa;

}

}

</style>

<style>

@media only screen{

body{

background-color:#bfa;

}

}

</style>

<style>

@media print,screen{

body{

background-color:#bfa;

}

}

</style>