Flexible.js可伸缩布局实现方法详解

简介

Flexible.js是一个轻量级的JavaScript库，用于实现Web页面的可伸缩布局，可以自动适应不同的设备尺寸，包括PC、平板、手机等。它基于CSS3的@media查询和JavaScript的媒体查询，实现了根据屏幕宽度自动调整html字体大小的功能，从而达到了页面的自适应布局效果。

使用方法

步骤一：引入Flexible.js文件

在HTML文件的标签内引入Flexible.js文件：

<script src="flexible.js"></script>

步骤二：设置meta标签

在HTML文件的标签内设置meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

其中，viewport指定了页面的宽度和缩放比例，user-scalable=0表示禁止用户手动缩放。

步骤三：使用rem作为单位

在CSS样式文件中，使用rem作为单位。其中，rem表示相对于根元素(html)的字体大小，而根元素的字体大小会由Flexible.js自动根据屏幕宽度进行调整。

body {
    font-size: 14px;
}

p {
    font-size: 0.8rem;
}

步骤四：设置媒体查询

在CSS样式文件中，使用@media查询，在不同的屏幕尺寸下，设置不同的样式。

@media screen and (max-width: 480px) {
    /* 小屏幕样式 */
    body {
        font-size: 12px;
    }

    p {
        font-size: 0.6rem;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    /* 中屏幕样式 */
    body {
        font-size: 16px;
    }

    p {
        font-size: 0.8rem;
    }
}

@media screen and (min-width: 769px) {
    /* 大屏幕样式 */
    body {
        font-size: 18px;
    }

    p {
        font-size: 1rem;
    }
}

示例说明

示例1：两栏布局

<style>
    /* 公共样式 */
    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    /* 左栏样式 */
    .left {
        background-color: #F7F7F7;
        float: left;
        width: 20%;
        height: 500px;
        font-size: 0.8rem;
    }

    /* 右栏样式 */
    .right {
        background-color: #FFF;
        float: left;
        width: 80%;
        height: 500px;
        font-size: 0.8rem;
    }

    /* 小屏幕样式 */
    @media screen and (max-width: 480px) {
        .left {
            width: 100%;
        }

        .right {
            width: 100%;
        }
    }

    /* 中屏幕样式 */
    @media screen and (min-width: 481px) and (max-width: 768px) {
        .left {
            width: 30%;
        }

        .right {
            width: 70%;
        }
    }

    /* 大屏幕样式 */
    @media screen and (min-width: 769px) {
        .left {
            width: 20%;
        }

        .right {
            width: 80%;
        }
    }
</style>

<div class="left">
    <p>左栏内容</p>
</div>

<div class="right">
    <p>右栏内容</p>
</div>

在PC端，左半部分占据20%的宽度，右半部分占据80%的宽度；在手机端，左半部分占据100%的宽度，右半部分占据100%的宽度。

示例2：自适应图片

<style>
    /* 公共样式 */
    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    /* 图片样式 */
    .img-container {
        max-width: 100%;
    }

    .img-container img {
        width: 100%;
        height: auto;
    }

    /* 小屏幕样式 */
    @media screen and (max-width: 480px) {
        /* 图片样式 */
        .img-container img {
            width: 80%;
        }
    }

    /* 中屏幕样式 */
    @media screen and (min-width: 481px) and (max-width: 768px) {
        /* 图片样式 */
        .img-container img {
            width: 60%;
        }
    }

    /* 大屏幕样式 */
    @media screen and (min-width: 769px) {
        /* 图片样式 */
        .img-container img {
            width: 40%;
        }
    }
</style>

<div class="img-container">
    <img src="example.jpg">
</div>

图片会根据屏幕尺寸自动调整宽度，从而达到了自适应的效果。在PC端，图片宽度为40%的宽度；在手机端，图片宽度为80%的宽度。