1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
/* 当屏幕上页面课件区域小于1024时 执行以下css代码 */
@media all and (max-width: 1024px) {
div:first-child{
background-color: yellowgreen;
}
*{
margin: 0;
padding: 0;
}
html{
font-size: 32px;
}
}
@media only screen and (min-width: 1280px) {
div:first-child{
background-color: pink;
}
html{
font-size: 64px;
}
}
@media all and (min-width: 1024px) and (max-width: 1280px){
div:first-child{
background-color: red;
}
html{
font-size: 48px;
}
}
@media only print {
.waterPrint{
display: block;
}
}
