浏览器大小屏适配的方法

               

    分到为我们的客户端产品做一个下载页面。设计师分别给了大屏和小屏的切图，那么问题来了，如何根据屏幕的大小显示不同的图片？这个之前没做过，一个同事提示，用js获取浏览器的大小，动态替换图片。方法肯定可行，但是感觉很麻烦。产品经理要求做成跟QQ下载页相似的效果。为何不去研究下QQ下载页的方法呢？

    在笔记本和台式机上打开QQ的下载页，审查元素，大屏用的大图，小屏用的小图。他们引用的css文件不一样。小屏引用的css文件头有这样的代码：

@media screen and (max-height: 800px)

    百度了下这个代码的功能，是多媒体查询，可以针对不同的屏幕尺寸设置不同的样式。这个才是解决大小屏问题一剑封喉的捷径。