屏幕适应之关于flexible.js的使用

flexible.js 是一个用于在移动端自适应的脚本，可以帮助我们在开发响应式网页时处理不同屏幕尺寸的显示问题。以下是一个简单的使用示例：

首先，在你的HTML文件中引入flexible.js：

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

然后，你可以通过CSS媒体查询和百分比宽度来创建一个响应式布局。例如：

/* 设置基本字体大小 */
html {
    font-size: 10px;
}
 
/* 通过媒体查询调整基本字体大小 */
@media screen and (min-width: 320px) {
    html {
        font-size: 10px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 11.25px; /* 10px * (360/320) */
    }
}
 
/* 使用rem单位设置元素宽度和字体大小 */
.container {
    width: 6.25rem; /* 62.5px */
    font-size: 0.875rem; /* 8.75px */
}

在这个例子中，我们设置了基本的字体大小为10px，然后通过媒体查询调整不同屏幕宽度下的字体大小比例。这样，我们就可以用rem单位来设置元素的宽度和字体大小，这些值会根据根元素（html）的字体大小变化而自适应。

注意，flexible.js 会根据屏幕宽度动态调整html元素的字体大小，所以不需要手动设置固定的字体大小。只需要使用rem单位来定义布局尺寸，就可以实现响应式设计。