如何自适应不同的分辨率界面？.pdfVIP

如何自适应不同的分辨率界面 ？ 首先呢来看一张图 ： 这是2个半月腾讯游 官网的分辨率数据 ，可以看出来PC端里1024*768 占20%、1920* 1080 占14 % 。而这2个分辨率的显示宽度相差了接近一倍。 而现在设计师的设计稿普遍输出尺寸都是1920 ，所以设计师经常也会担心 ：小分辨率下能看到吗 ？ 或者需要为手机端单独做一版吗 ？所以我们需要用一些技巧来让大多数用户能看到的页面效果是一 样的。 一、PC端 【举例1】ht t p://up.qq.co m/2014/lif e/ 1920* 1080下显示。 设计的很美观 但是如果直接按原始大小做 ，小分辨率玩家只能看到中间的人物而已。 经常我们做全f lash站的时候 ，会看到多媒体的同学会为了配合多分辨率做展示上的自适应。 而重构其实纯靠css也可以实现同样的缩放自适应 ： 这样不会因为分辨率小而只能看到中间一个区域 ，或者出现滚动条影响体验。 实现思路 ： 1: 针对I ：I 有个zoo m属性。虽然经常我们用它来清浮动什么的。但是它在缩放元素上也是很强 大的。 eg ：被设置zoo m:0.5的元素会以该元素的左上角为原点在直接被缩小一半 ，所占据的文档流 内体积也会减少一半 （I 7和8+对zoo m后的元素的 margin值理解不同可以注意下 ，