利用js判断屏幕的大小来进行不同页面效果布局

判断屏幕的大小
功能:主要是辅助你进行响应式布局的时候,方便你在不同的屏幕大小的时候设置不同的效果。(一般在响应式布局的时候用)
响应布局屏幕的参数:
xs(小于768px) width:auto
sm(大于等于768px) width:720+槽宽
md(大于等于992px) width:940+槽宽
lg(大于等于1200) width:1140+槽宽

如下图所示,可以看到浏览器显示页面的大小的改变而显示浏览器的分辨率,这样可以方便我们根据不同的分辨率写不同的布局效果。
大屏幕


小屏幕


下面是判断屏幕大小的核心代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>判断屏幕的大小</title>
        <style type="text/css">
            
        </style>
    </head>

    <body>

        <script>
            whatScreen();
            window.onresize = function() {
                whatScreen();
            };

            function whatScreen() {
                var width = document.querySelector("html").offsetWidth;
                var title = document.querySelector("title");
                if(width <= 768) {
                    title.innerHTML = "极小屏幕-" + width;
                } else {
                    if(width > 768 && width <= 992) {
                        title.innerHTML = "小屏幕-" + width;
                    } else {
                        if(width > 992 && width <= 1200) {
                            title.innerHTML = "普通屏幕-" + width;
                        } else {
                            if(width > 1200) {
                                title.innerHTML = "大屏幕-" + width;
                            }
                        }
                    }
                }
            }
        </script>

    </body>

</html>
返回顶部
 
QQ在线咨询
QQ客服
淘宝官网