移动端开发之 -- 妈的! 头疼!
接触移动端之后才发现 移动端的坑比PC端的不知多了多少 。唉 。这一个月以来 。累死我了。不过。感觉。收获很多。在此记录。以便后查。
1.rem布局
整了一上午 终于整出来了 发现 网上好多的rem.js都不是很好 我整了一天 终于整出来了 以后引用的话 直接拿走 就OK了
(function(doc, win) {
var html = doc.getElementsByTagName("html")[0],
reEvt = "orientationchange" in win ? "orientationchange" : "resize",
reFontSize = function() {
var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
if(!clientW) {
return;
}
html.style.fontSize = 100 * (clientW / 375) + "px";
}
reFontSize()
})(document, window);
具体 怎么用 <script src="rem.js"></script> 引用上面这个rem.js
然后在页面中 换算
怎么换算 如果设计稿 给的是 30px (在这里说的 设计稿 都是针对iphone6的设计稿)
那么 30px / 2 = 15px (这个就算 不用rem的话 也要除以2的 )
然后 15px / 100 = 0.15rem 字体大小就是 0.15rem
你可以在浏览器上测一下 0.15rem 在iphone6上是15px 在 iphone5上就是12px 这样的话 就可以达到适配的效果