移动端的适配：解锁无尽可能性

为什么要进行移动端适配？

主要是为了防止界面变形。如果给页面写死的界面，那不同的设备，分辨率和屏幕比例就会导致整个界面的变形。不仅会破坏网页的完整性，也会导致用户体验的下降。这时候就不得不考虑在不同手机端和不同使用环境下展示效果上的统一。

如何进行移动端适配？

直接引入

这是最推荐的办法。这个移动端的适配问题最早是淘宝写了一份代码，而经过这么长时间的各路程序员的完善，修正。这份代码已经很完全了，而且很容易就能找到。我这边使用npm安装，使用终端打开项目的目录，然后直接输入npm i lib-flexiblenpm就会给安装这样一份js代码。之后再import 'lib-flexible/flexible'引入这份全局的样式。之后对你的各种界面的距离之间的设置就使用rem这个相对单位了。对于这份代码的原理以及为什么要用rem来设置距离，我会在手写移动端适配和你说。

手写移动端适配

rem

首先来说一说rem。rem 是相对于根元素（html）的字体大小来计算的。移动端的适配通常会采用相对单位（如 rem、vw）或者通过 JavaScript 监听视口宽度变化，主动调整根元素字体大小，以确保在不同设备和屏幕尺寸下保持页面的良好可读性和呈现效果。因此，如果您在不同的设备上查看同一网站或者是缩放放大页面，设备的屏幕尺寸和分辨率不同。这使得页面中的所有元素都可以根据相对一致的比例进行缩放。
而我们也就知道，对于移动端适配的那份代码原理就是不断的监听视口宽度变化，主动调整根元素字体大小，以确保在不同设备和屏幕尺寸下保持页面的良好可读性和呈现效果。

        // 提供一个适配所有机型的rem工具，让1rem等于所有机型的十分之一
        // 1. 得到屏幕宽度
        // 2. 获取html元素
        // 3. 计算font-size
        // 适配各种设备（横屏，竖屏转换，ipad）
        (function(){
            var htmlElement=document.documentElement;
            function getFontsize(){
                var width=window.innerWidth;
                var fontSize=width/10;
                return fontSize;
            }// 封装函数
            htmlElement.style.fontSize=getFontsize()+'px';
            window.addEventListener('resize', function() {
            htmlElement.fontSize = getFontsize() + 'px';})
            // html 动态设置font-size
        })()

注意，这只是一个非常简略的移动端的适配。真正的移动端适配还有很多其他的问题需要考虑，这个代码主要是帮助对移动端适配的底层原理的理解。在实战时还是建议直接引入。