Flexible实现H5移动端适配小demo

最新推荐文章于 2020-01-14 14:59:46 发布

diuxieyu2483

最新推荐文章于 2020-01-14 14:59:46 发布

阅读量164

点赞数

原文链接：http://www.cnblogs.com/tangzhirong/p/7429585.html

版权

前言

看了宇哥关于移动端适配的分享后，加上目前公司项目也需要做移动端适配，今天就抽空搞了搞。目前业界还是比较推崇手淘使用“rem+viewport”的解决方案，今天自己模仿手淘flexible的解决方案，实现了个简单的demo。

一句话总结

flexible动态获取设备宽度和dpr，为html元素添加两个属性：data-fontsize（设备宽度／10），data-dpr（安卓均为1，ios不同设备为2或3），同时设置meta标签的scale（1/dpr）。你只需要为需要适配的元素设置rem，为字体设置px（需要考虑不同的dpr）。

小demo

<!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="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>
        <style type="text/css">
            .item-section{
                width: 10rem;
                margin: 0 auto;
            }
            img{
                width: 10rem;
            }
            [data-dpr="1"] .flag-title a{
                font-size: 14px;
            }
            [data-dpr="2"] .flag-title a{
                font-size: 28px;
            }
            [data-dpr="3"] .flag-title a{
                font-size: 42px;
            }
        </style>
    </head>
    <body>
        <div class="item-section" data-repeat="sections">
            <ul>
                <li data-repeat="items" class="flag" role="link" href="##">
                    <a class="figure flag-item" href="##">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="figcaption flag-item">
                        <div class="flag-title"><a href="##" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/tangzhirong/p/7429585.html

diuxieyu2483

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flexible实现H5移动端适配小demo

前言看了宇哥关于移动端适配的分享后，加上目前公司项目也需要做移动端适配，今天就抽空搞了搞。目前业界还是比较推崇手淘使用“rem+viewport”的解决方案，今天自己模仿手淘flexible的解决方案，实现了个简单的demo。一句话总结flexible动态获取设备宽度和dpr，为html元素添加两个属性：data-fontsize（设备宽度／10），data-dpr（安卓均为1，i...
复制链接

扫一扫