Flexible实现H5页面的终端适配

最新推荐文章于 2024-05-05 12:58:21 发布

送你一个大西瓜

最新推荐文章于 2024-05-05 12:58:21 发布

阅读量399

点赞数

分类专栏：移动端文章标签：前端开发移动端

本文链接：https://blog.csdn.net/qq_17431235/article/details/70161216

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

设计师和前端开发的适配协作基本思路是：

选择一种尺寸作为设计和开发基准
定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的)
特殊适配效果给出设计效果

lib-flexible是什么？
lib-flexible是一个制作H5适配的开源库。点击下载

使用方法

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>
//或者直接加载阿里CDN的文件：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

案例实战

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <link rel="apple-touch-icon" href="favicon.png">
        <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
        <title>再来一波</title>
    </head>
    <body>
        <!-- 页面结构写在这里 -->
    </body>
</html>

正如前面所介绍的一样，首先加载了Flexible所需的配置：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

这个时候可以根据设计的图需求，在HTML文档的中添加对应的HTML结构，比如：

<div class="item-section" data-repeat="sections">
    <div class="item-section_header">
        <h2><img src="{brannerImag}" alt=""></h2>
    </div>
    <ul>
        <li data-repeat="items" class="flag" role="link" href="{itemLink}">
            <a class="figure flag-item" href="{itemLink}">
                <img src="{imgSrc}" alt="">
            </a>
            <div class="figcaption flag-item">
                <div class="flag-title"><a href="{itemLink}" title="">{poductName}</a></div>
                <div class="flag-price"><span>双11价</span><strong>¥{price}</strong>
                <small>({preferential})</small></div>
                <div class="flag-type">{activityType}</div>
                <a class="flag-btn" href="{shopLink}">{activeName}</a>
            </div>
        </li>
    </ul>
</div>