关关思密达

导航

移动端开发之 -- 妈的! 头疼!

接触移动端之后才发现  移动端的坑比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  这样的话  就可以达到适配的效果

 

posted on 2017-12-08 18:12  关关思密达  阅读(106)  评论(0编辑  收藏  举报