伪响应式开发（PC和Mobile分离）

screen.width

无论把浏览器缩小还是放大，screen.width的值都不会改变，但是IE9及以上浏览器才支持这个属性。

 

@media screen 媒体查询的巨大缺陷：
切换页面布局的时候JS逻辑耦合

 

注意点：

移动端浏览器不会接触到IE7/IE8
手机横竖screen.width都是屏幕竖着时候的宽度
打开控制台，进入手机模式，此时，screen.width也会跟着一起变（记得刷新下页面）

只要我们确认了用户的屏幕尺寸，我们就可以在一开始就确定我们的【页面布局】以及所需要的【交互】。

 

代码：

(function (doc, win) {
    var size = '';
    var screenWidth = 0;
    var root = doc.documentElement; // 在html上生成一个class
    if(win.screen && screen.width) {
        screenWidth = screen.width;

        //alert(screenWidth);

        if(screenWidth >= 1200 && screenWidth <= 1920) {
            size = 'pc';
        }else if(screenWidth <= 480) {
            size = 'mobile';
        }

        // JS可以拿去判断
        win.size = size;

        // CSS可以拿去写样式
        root.className = size;
    }
})(document, window);

alert(window.size);

 

screen.width 方法的优点：
真实目前在线的有一定分量的项目验证过的

screen.width 方法的缺点：
缩小屏幕没法体验手机（必须切换到手机设备）

学习来自[ 张鑫旭的空间 ]