刚做完几个简单的响应式设计的网站项目下来，杂七杂八 （二）

<meta name="viewport" id="yourViewportID" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

@media screen and (max-width: 1118px) {
/*add your css styles here*/
}
@media screen and (max-width: 700px) {
/*add your css styles here*/
}
@media screen and (max-width: 400px) {
/*add your css styles here*/
}

var browser_width = $(window).width();
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
jQuery(document).ready(function() {
var browser_width = $(window).width();
    if (isMobile.any()) {
        if (browser_width < 700) {
                var scale = browser_width / 400;/*获取比例，要动态设置各手机的元素的样式以达到满屏显示*/
                setMobileTemplate(scale);             
            }
        }
        else if (browser_width > 700 && browser_width < 1118) {
            setMiddleTemplate();
        }
        else if (browser_width > 1118) {
            setLargeTemplate();
        }
    }
    else {
        if (browser_width > 1118) {
            setLargeTemplate();

        }
        else if (browser_width > 700) {
            setMiddleTemplate();

        }
        else {
            setSmallTemplate();
        }
    }
});
var resizeFlag = 0;
$(window).resize(function() {
    var browser_width = $(window).width();
    setTimeout(function() {
        var browser_width = $(window).width();
        if (browser_width > 1118) {
            if (resizeFlag != 1) {
                setLargeTemplate();
                resizeFlag = 1;
            }
        }
        else if (browser_width > 700) {
            if (resizeFlag != 2) {
                setMiddleTemplate();
                resizeFlag = 2;
            }

        }
        else if (browser_width > 400) {
            if (resizeFlag != 3) {
                setSmallTemplate();
                resizeFlag = 3;
            }
        }
        else if (browser_width < 400) {
            if (resizeFlag != 4) {
                setSmallTemplate();
                if (isMobile.any()) {
                    var scale = browser_width / 400;/* 手机横竖屏时设置获取比例，要动态设置各手机的元素的样式以达到满屏显示*/
                    setMobileTemplate(scale);  
                }
                resizeFlag = 4;
            }
        }

    }, 500);
});

function setLargeTemplate(){
 /*当浏览器宽度大于或者等于1118px时，在这用JS设置你的样式*/
}
setMiddleTemplate(){
 /*当浏览器宽度大于或者等于700px并小于1118px时，在这用JS设置你的样式*/
}
setSmallTemplate(){
 /*当浏览器宽度大于或者等于400px并小于700px时，在这用JS设置你的样式*/
}
setMobileTemplate(){
 /*手机浏览器，在这用JS设置你的样式*/
}