伪响应式开发（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 方法的缺点：
缩小屏幕没法体验手机（必须切换到手机设备）

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

巴特西

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

最新文章

热门文章