昨天做了一个微信场景,在谷歌的模拟器上没有问题,可以完全还原设计图,但是到了移动端一些问题出现了。不管使用微信浏览器还是qq浏览器或者移动端其他浏览器,都会出现一页的东西显示不全,下面的一部分会显示不出来。
由于我的使用的是背景图,而且很明显下面一部分背景图没有显示出来,一开始background-size:cover;是不能解决的,所以就用background-size:100% 100%;这样背景图就完全显示出来了,但是会有一点点变形,如果要求不高,背景图的问题就解决了。还有就是写在页面中的东西,如果有的元素在底部的话,就需要把top的值减小了。但是觉得一点点改回很繁琐,所以下一次最好关于微场景这种只允许出现一屏的内容的页面最好用百分比写top,如果是平时的网页的话就不用顾及这些问题了,就按设计图写就可以了,因为多出来的部分会出现滚动条,不会出现显示不全的问题。
在自适应上我用的是rem,rem计算方法如下:document.documentElement.style.fontSize = document.documentElement.clientWidth/设计图的宽度+'px'; 这样得出来的1rem = 100px;