使用Flexible实现手淘H5页面的终端适配【转】

最新推荐文章于 2021-07-24 15:07:28 发布
转载最新推荐文章于 2021-07-24 15:07:28 发布 · 712 阅读
文章标签：
#移动端适配 #flexible
css 专栏收录该内容
1 篇文章
订阅专栏
本文展示了一个使用Vue.js和HTML5实现的双11促销活动页面布局案例，页面包括了横幅图、商品列表等元素，并实现了响应式设计。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>
<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="build/flexible_css.debug.js"></script>
    <script src="build/flexible.debug.js"></script>
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
    <title>再来一波</title>

    <style>
        .item-section{
            min-height:100%;
            background-color:#ee0a3b;
            position:relative;font-size:12px
        }
        [data-dpr="2"] .item-section{
            font-size:24px
        }
        [data-dpr="3"] .item-section{
            font-size:36px
        }
        .item-section_header{
            text-align:center
        }
        .item-section_header img{
            width:10rem
        }
        .item-section ul{
            padding:.133333rem
        }
        .flag{
            display:table;
            width:100%;
            margin-bottom:1px;
            background-color:#fff
        }
        .flag .flag-item{
            display:table-cell;
            padding:.16rem 0;
            vertical-align:top;
            background-color:#fff
        }
        .flag .flag-item.figcaption{
            width:133.333333rem;
            padding-left:.2rem;
            padding-right:.2rem;
            position:relative
        }
        .flag .flag-item.figure{
            width:2.4rem;
            height:2.4rem
        }
        .flag .flag-item img{
            width:2.4rem;
            height:2.4rem;
            vertical-align:top
        }
        .flag .flag-title a{
            color:#333;
            line-height:1.25;
            overflow:hidden;
            -webkit-line-clamp:2;
            line-clamp:2;
            -webkit-box-orient:vertical;
            box-orient:vertical;
            display:-webkit-box;
            display:box
        }
        .flag .flag-price{
            padding:.15rem 0 .2rem
        }
        .flag .flag-price span{
            display:inline-block;
            background-color:#ee0a3b;
            vertical-align:middle;
            border-radius:.026667rem;
            padding:.026667rem .08rem .013333rem;
            color:#fff;
            font-weight:700;
            margin-right:.066667rem;
            font-size:11px
        }
        [data-dpr="2"] .flag .flag-price span{
            font-size:22px
        }
        [data-dpr="3"] .flag .flag-price span{
            font-size:33px
        }
        .flag .flag-price strong{
            display:inline-block;
            vertical-align:middle;
            font-weight:700;
            color:#ee0a3b;
            font-size:16px;
            margin-right:.16rem
        }
        [data-dpr="2"] .flag .flag-price strong{
            font-size:32px
        }
        [data-dpr="3"] .flag .flag-price strong{
            font-size:48px
        }
        .flag .flag-price small{
            display:inline-block;
            vertical-align:middle;
            font-weight:700;
            color:#ee0a3b;font-size:12px
        }
        [data-dpr="2"] .flag .flag-price small{
            font-size:24px
        }
        [data-dpr="3"] .flag .flag-price small{
            font-size:36px
        }
        .flag .flag-type{
            color:#ff3600
        }
        .flag .flag-btn{
            position:absolute;
            width:2.133333rem;
            height:.64rem;
            line-height:.64rem;
            background-color:#ee0a3b;
            text-align:center;
            color:#fff;
            font-weight:700;
            font-size:14px;
            bottom:.133333rem;
            right:.2rem;
            border-radius:.026667rem
        }
        [data-dpr="2"] .flag .flag-btn{
            font-size:28px
        }
        [data-dpr="3"] .flag .flag-btn{
            font-size:42px
        }
    </style>
</head>
<body>

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

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            data : {
                title: '再來一波',
                brannerImag: 'http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg',
                items: [
                    {
                        "itemLink": "##",
                        "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                        "poductName": "Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                        "price": "299.06",
                        "preferential": "满400减100",
                        "activityType": "1小时内热卖5885件",
                        "shopLink": "##",
                        "activeName": "马上抢！"
                    },
                    {
                        "itemLink": "##",
                        "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                        "poductName": "Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                        "price": "299.06",
                        "preferential": "满400减100",
                        "activityType": "1小时内热卖5885件",
                        "shopLink": "##",
                        "activeName": "马上抢！"
                    },
                    {
                        "itemLink": "##",
                        "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                        "poductName": "Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                        "price": "299.06",
                        "preferential": "满400减100",
                        "activityType": "1小时内热卖5885件",
                        "shopLink": "##",
                        "activeName": "马上抢！"
                    },
                    {
                        "itemLink": "##",
                        "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                        "poductName": "Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                        "price": "299.06",
                        "preferential": "满400减100",
                        "activityType": "1小时内热卖5885件",
                        "shopLink": "##",
                        "activeName": "马上抢！"
                    },
                    {
                        "itemLink": "##",
                        "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                        "poductName": "Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                        "price": "299.06",
                        "preferential": "满400减100",
                        "activityType": "1小时内热卖5885件",
                        "shopLink": "##",
                        "activeName": "马上抢！"
                    },
                    {
                        "itemLink": "##",
                        "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                        "poductName": "Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                        "price": "299.06",
                        "preferential": "满400减100",
                        "activityType": "1小时内热卖5885件",
                        "shopLink": "##",
                        "activeName": "马上抢！"
                    }
                ]
            },
            method : {}
        }).$mount('#app') ;
    </script>
</body>
</html>


【原文链接】  https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html