码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器大小屏适配的方法

时间:2015-06-11 13:02:19      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

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

浏览器大小屏适配的方法

标签:

原文地址:http://blog.csdn.net/bruce128/article/details/46454989

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!