Question

开发移动响应式网站选择哪个？

1、制作手机版、pc版两个版本网站，再使用device.js检测移动设备实现手机版网页跳转？
2、使用媒体查询，根据不同分辨率调用不同的css，流式布局？或者使用bootstrap3框架？

初学响应式网站，看了很多资料和视频，困惑种，望前辈指点一下

Answer 1

      响应式网站的优势是一套代码、后台管理系统也是一套，可以适配不同的屏幕。

其实，你上述的方法1实现调转，不过是PC和移动网站之间调转，在制作手机版还是要采用响应式设计，因为移动端的屏幕分辨率也是五花八门。

       目前，最省事的方法是PC端一套，手机端用响应式设计。可以采用CSS3媒体查询、流动布局以及rem，控制根元素默认字体大小的Javascript代码如下：

       

    (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 = 20 * (clientWidth / 1400) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
	

追问

谢谢您的回答