swiper跟rem出线的一个稀奇古怪的问题
我的网页代码如下,无论是给swiper-wrapper加宽高,加overfllow:hidden都不行。研究了一晚上-。-好菜啊我
rem这个插件的代码如下:
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 640) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
理论上每个p的宽度为640px,但是却变得非常的小,如下图所示,大约每个100多px,这是为何。
把rem.js去掉看看是不是元素宽度一样?说明页面进来后rem没有起作用,看下rem什么时候执行:
想到原因了没?还没有?网页默认rem是多少?1rem = 16px,那么你写的p宽度为6.4rem算出来是多少px?再用模拟器看下和16*6.4一样不?那为啥html标签上显示了当前的font-size,但是rem却不正确呢?
原理看这里,有点长不过值得看
你好,我现在在弄微信的一个项目也遇到rem'和swiper的问题了,想问下这个问题你解决了吗。
不太清楚楼主的
rem
基础值(fontsize)为什么那么算,rem本身根据根元素的字体大小去计算,而这个值需要根据不同的屏幕去人为的改变,我是利用js去算的,根元素font-size
大小等于浏览器宽度/20,具体可以参考利用CSS3新单位rem实现响应