自己做手机端网站的心得

对于没有接触过手机端的前端来说，或许很迷茫，不知道该如何去下手，可能百度会告诉你一些东西，但是总归只是有些零散，对于略有强迫症的我，对于东拼西凑，理解不是很彻底的情况下就做手机，那感觉很不爽。

目前关于手机端的制作据我自己的不完全了解，大概有三个方向，一个js框架比如jQuery mobile，一个是响应式框架，近期比较火是bootstrap，另外一个就是使用rem布局，对于rem不了解的可以看这个页面，自己就是在这个地址了解到的http://www.w3cplus.com/css3/define-font-size-with-css3-rem。

就我自己而言只是接触过jQuery mobile和rem方式去写代码，对于bootstrap只是简单的了解，在此就不去细说了，说反而会丢人，所以就从这两方面去说。

对于jQuery mobile以后简称jm自己做过一个手机站，因为是公司整个都是第一次做手机站所以知道了解的也比较少，就去网上了解一些东西，公司设计的手机站也不是很专业所以当选择使用jm的时候发生了种种问题，因为jm可能从设计上来讲有自己的局限性，按照他给的模板页面会更好走，我们公司的手机端设计就直接是在pc的基础上改小，加上自己对jm的不了解，做起来很费事，加上技术和设计的思想不一致，来回让改，但是由于自己对手机端的不了解，只好硬着头皮顶下来，收获还是有的，但是没过多长时间有出现问题了，公司会定期上一些专题没有什么内容基本都是图片，所以就没有用jm，但是专题会调用一个公共的底部，而专题的页面是没有使用jm的所以页面的底部就很乱，也没别的办法啊，不可能整个在切个手机站，只得在另开一个foot去写底部。

说到专题我又想岔开一下，就是自己刚开始做手机端的各种纠结，最初写样式的时候是使用@media 然后对大概的一个尺寸去写样式，当时傻啊，就自己看着跟设计稿差不多的字体就那么换上了，结果设计老是让返工，郁闷了好长时间终于也找到了可以自适应手机端页面js。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize =100*(clientWidth / 1080)+ 'px';
        };
    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);

这段代码有点代码基础的应该都看的明白吧，我就不多解释了，有了这个js配合rem使用，那叫一个爽歪歪，也省了好多事。但是随着做的页面越来越多，你会发现rem也有没有办法的时候，页面不能很精准，就是因为上面那段js转换的原因，但是也没有办法这是我目前想到觉得最好的制作手机端方式。

第一次发博客，纯粹自己的感悟，肯定有很多不足的地方，如果不当之处欢迎指出，不喜勿喷。