美文网首页
三种(rem)移动端适配方案

三种(rem)移动端适配方案

作者: 快乐小码仔 | 来源:发表于2019-04-12 17:48 被阅读0次
  1. 媒体查询。

  2. js 动态设置 html 的 font-size(rem 为单位)。

  3. 淘宝提供的解决方案 flexible.js(rem 为单位)。

媒体查询

优点:

  1. 方法简单,成本低,移动和 PC 维护同一套代码。

  2. 只用修改 css 文件。

缺点:

  1. 代码量大,维护不方便。

  2. 为兼顾大屏或高清设备,会造成其他资源浪费,特别是加载图片资源。

  3. 为了兼顾移动端和 PC 端各自响应式的展示效果,难免会损失各自特有的交互方式。

js 动态设置 html 的 font-size

  1. 设置 meta viewport 属性

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    
  2. 添加动态设置 html 的 font-size 的 js

    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
            // 设置设计稿的宽度clientWidth为750
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '75px';
                } else {
                    // 设置设计稿的宽度clientWidth为750
                    docEl.style.fontSize = 75 * (clientWidth / 750) + 'px';
                };
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    

淘宝提供的解决方案 flexible.js

这个解决方案只解决苹果设备上的 dpr 为2和3的情况,不考虑安卓设备也不考虑 pad。

  1. 设置 meta 标签。

    <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" />
    <meta content="maximum-dpr=2" name="flexible" />
    
  2. 引入 flexible.js 文件。

    <script src="[http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js](http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js)"></script>
    
  3. 把设计稿中的px转化为rem

    但在实际开发中, 借助一个工具cssrem. 通过vscode开发工具下载cssrem插件,然后在设置里面找到cssrem.rootFontSize, 把数值设为75(一般情况下移动端设计稿默认是750, 1rem就是75px, 可根据设计稿尺寸自行调整)

    QQ截图20190412174517.png
  1. 案列代码如下:

    <!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>
            <div class="item-section" data-repeat="sections">
                <div class="item-section_header">
                    <h2><img src="https://img.alicdn.com/imgextra/i2/67/O1CN01NiiRMD1CMj3I17yFc_!!67-0-luban.jpg" alt=""></h2>
                </div>
                <ul>
                    <li data-repeat="items" class="flag" role="link" href="{itemLink}">
                        <div class="figcaption flag-item">
                            <div class="flag-title"><a href="{itemLink}" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a></div>
                            <div class="flag-price"><span>双11价</span><strong>¥299.06</strong><small>(满400减100)</small></div>
                            <div class="flag-type">1小时内热卖5885件</div>
                            <a class="flag-btn" href="{shopLink}">{activeName}</a>
                        </div>
                    </li>
                </ul>
            </div>
        </body>
        <style>
            .flag-type{
                margin-top: 10rem;
            }
            
        </style>
    </html>
    

相关文章

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

  • 移动端适配方案

    @description 该方法是用于移动端适配功能, 结合淘宝的适配方案flexible + rem 实现适配,...

  • 记一次前端技术分享(移动端相关概念讲解)

    移动端开发中的相关概念讲解 1、移动端自适配方案 移动端如何根据不同手机尺寸进行页面的适配 rem 自适应和 vw...

  • 移动端页面适配

    移动端页面适配 rem 与 vw 再看看15年手淘方案:Flexible + rem Flexible 从流行到今...

  • 移动端适配

    移动端适配 1.适配宽高等问题REM方案:改变页面根部的font-size js方案:通过缩放viewport,达...

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

  • 移动web开发与适配

    学习目标 了解移动web简单调试方法 了解移动web常见适配方案 掌握移动端布局技巧 全面掌握rem适配方法 移动...

网友评论

      本文标题:三种(rem)移动端适配方案

      本文链接:https://www.haomeiwen.com/subject/gxhhwqtx.html