移动端 | Jonnzer's Blog

如何编写移动端😎 ？话不多说，即刻带大家进入今天主题

如我们常规所见，移动端和PC端的最大差异就是：设备的分辨率。

移动端：下面是一段默认加载在头部的设置html标签的fontSize的js

export default function (pageWidth= 750) { // 设计稿可以传参，普遍是750
    !(function(win, doc){
        function setFontSize() {
            // 获取设备 宽度
            var winWidth =  window.innerWidth;
            var size = (winWidth / pageWidth) * 100;
            doc.documentElement.style.fontSize = size + 'px' ;
        }
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

        var timer = null;

        win.addEventListener(evt, function () {
            clearTimeout(timer);

            timer = setTimeout(setFontSize, 300);
        }, false);

        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);

                timer = setTimeout(setFontSize, 300);
            }
        }, false);

        setFontSize();

    }(window, document));
}

动态的获取设备独立像素，然后除以设计稿的宽度(常规UI是输出750宽度)，要乘100，然后赋给根字体的fontsize，以致做到自适应，来动态改变根字体大小。这里拿到是百分比。
为什么要乘100，首先假设说设备分辨率是375，375 / 750是0.5，0.5我们称为比例R.而浏览器默认最小字体为12px。这时我们的0.5就会被12重置了。所以我们需要放大一些，而100又很好算。在此，就把浏览器默认字号设置为100px，刚才获取的0.5是比例。那么相乘后获得的50px，就是自适应后的html根字体大小。

为了适配移动端，把单位转换成rem。

1
2
3

body{
    font-size: 16px; // 会使rem不跟随错误的12px或者10px （比如设置62.5%时，就会`bodysize`是10px，那样em和rem都会算错。）
    }

那么1rem 等于（2）步骤返回的html 根字体大小。但这时候问题来了，设计稿输出的是750宽的图纸，而且是px，那么中间该怎么转化？？？比如说1rem 等于50px 那我现在的banner图是690px高，我应该是输出一个690/50 = result(rem)
借助sass函数，输入值为690px，

1
2
3

@function pxTorem($px){//$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem; // 其实这里可以理解为 $px * （1rem/ 100）,也就是banner图的高度 * （比例R），从而获得它在这个该设备应该有的大小。
  }

所以在我们平时写css的时候，可以这么写样式了

.city-li{
  text-align: center;
  height: pxTorem(56px);
  line-height: pxTorem(56px);
  padding-left: pxTorem(10px);
    }

在可以书写移动端样式后。继续探讨：第二差异是网络环境。网络加载速度不一致是移动端的瓶颈，所以代码量的大小和质量是移动端性能优化的关键。