JS Flexible|极客笔记

JS Flexible

在现代的网页设计和开发中，响应式布局已经成为了一个非常重要的概念。不同设备、不同尺寸的屏幕，要求网页能够自适应地展示内容，以确保用户在任何设备上都能够有良好的浏览体验。而在实现响应式布局中，JavaScript的flexible布局方案起着至关重要的作用。

什么是Flexible布局？

Flexible布局是一种基于HTML、CSS和JavaScript的响应式设计方案，旨在解决不同屏幕尺寸下网页显示的问题。它基于Viewport视口的概念，通过调整Viewport的尺寸，让网页的布局能够随着屏幕的尺寸变化而自动调整。

具体来说，Flexible布局利用JavaScript动态设置Viewport的meta标签中的视图宽度（viewport width），从而使得网页能够根据设备的屏幕宽度来进行自适应的展示。同时，它还根据屏幕尺寸计算出一个基准字体大小，用于实现网页中文字大小的适配。

使用Flexible布局方案，我们可以简化多设备适配的开发难度，提高开发和维护效率，同时提供更好的用户体验。

Flexible布局的设置

为了使用Flexible布局，我们需要在HTML的头部引入一段JavaScript代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Flexible布局</title>
    <script>
        (function flexible(window, document) {
            var docEl = document.documentElement;
            var dpr = window.devicePixelRatio || 1;

            // 设置data-dpr属性，留作CSS hack之用
            docEl.setAttribute('data-dpr', dpr);

            var scale = 1 / dpr;

            // 根据设备的dpr动态设置Viewport的meta标签
            var metaEl = document.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            document.head.appendChild(metaEl);

            // 计算基准字体大小
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;

                // 设计稿宽度为750px时，1rem = 100px
                var rem = width / 750 * 100;
                docEl.style.fontSize = rem + 'px';
            }

            // 监听窗口变化，重新计算基准字体大小
            window.addEventListener('resize', refreshRem, false);
            document.addEventListener('DOMContentLoaded', refreshRem, false);

        })(window, document);
    </script>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

这段JavaScript代码实现了Flexible布局的核心逻辑：

首先，获取屏幕的 devicePixelRatio，用于计算不同屏幕像素密度下网页的显示效果。
设置 data-dpr 属性，用于在CSS中进行不同像素密度设备的适配。
动态设置 Viewport 的meta标签，用于调整网页布局。
计算基准字体大小，根据设计稿的宽度，将之转换为 rem 单位。并将其应用到 html 标签的 font-size 属性上。
监听窗口变化事件和页面加载事件，以便在窗口大小改变或页面加载后重新计算基准字体大小。

Flexible布局的优势

使用Flexible布局方案可以带来许多优势：

跨平台适配：Flexible布局可以适应不同的设备和平台，无论是手机、平板还是PC，不同尺寸的屏幕都可以良好地呈现。
简化布局适配：通过Flexible布局，我们不再需要为每种设备编写不同的样式表，只需要编写一套布局规则，即可适配不同屏幕宽度的设备。
提高开发效率：使用Flexible布局，可以大幅度减少在布局适配上的开发时间和维护成本。
更好的用户体验：Flexible布局可以确保用户在不同设备上都能够获得良好的浏览体验，不会出现布局错乱、文字过小等问题。

示例代码

下面是一个使用了Flexible布局的示例代码，用于展示一个简单的页面布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Flexible布局示例</title>
    <script>
        (function flexible(window, document) {
            var docEl = document.documentElement;
            var dpr = window.devicePixelRatio || 1;

            docEl.setAttribute('data-dpr', dpr);

            var scale = 1 / dpr;

            var metaEl = document.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            document.head.appendChild(metaEl);

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                var rem = width / 750 * 100;
                docEl.style.fontSize = rem + 'px';
            }

            window.addEventListener('resize', refreshRem, false);
            document.addEventListener('DOMContentLoaded', refreshRem, false);

        })(window, document);
    </script>
    <style>
        /* 示例样式 */
        .container {
            width: 100%;
            height: 300px;
            background-color: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.4rem;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">Hello, Flexible布局!</div>
</body>
</html>

在上面的示例代码中，我们将一个容器居中显示，并设置容器的字体大小为0.4rem。当页面加载或窗口大小变化时，由于使用了Flexible布局，容器的大小和字体大小会自动适应屏幕的尺寸变化。