在css2的时候就已经存在了媒体查询，只是针对分辨率的，电视，电脑，打印机这些常用设备的(我们要在这些上面展示页面)，当时没考虑手机端的，随着移动端的发展，css2不在满足这些移动端的分辨率,css3通过屏幕的分辨率自动判断大小(响应式布局)
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/* css2的媒体查询@media tv,screen,print{p.box{}} *//* @media only screen and (min-width: 500px) and (max-width:900px){ *//* p.box{color: red;font-size: 23px;background-color: black;/* 楷体 *//* font-family: "楷体"; 必须是电脑上面装的字体*//* } */ /* 自定义字体 */@font-face{font-family: myFirstFont;src: url(fonts/maozedong.ttf);}.box span{font-family:myFirstFont;} </style></head><body><p class="box"><span>这是一个段落文章</span></p></body>
</html>