移动端h5页面自适应

自适应布局

在做h5项目的时候，不同的手机型号和屏幕的大小，有时候会产生不同的效果，但是也不能为了每一个手机重新写一个代码，所以在编写整个项目之前，可以做一些处理，让页面可以根据不同的型号进行屏幕的自适应

方法一：meta viewport

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。
H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

方法二：rem

em & rem

em是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。1em=16px。在使用em的时候需要注意em的值不是固定的，会继承父元素的字体大小。

rem 是一个相对单位。是相对HTML根元素。

em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系。

<script>
            // eruda.init();
            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt =
                        "orientationchange" in window
                            ? "orientationchange"
                            : "resize",
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if (clientWidth >= 750) {
                            docEl.style.fontSize = "100px";
                        } else {
                            docEl.style.fontSize =
                                100 * (clientWidth / 750) + "px";
                        }
                    };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener("DOMContentLoaded", recalc, false);
            })(document, window);
        </script>

方法三：@media

媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

方法四：百分比

方法五：vw vh

vw是基于viewport视窗的长度单位。1vw等于window.innerWidth的1%

e.g. 设备物理宽度为375px时，1vw = 3.75px

方法六：dpr 设备像素比

设备像素比device pixel ratio简称dpr`，即物理像素和设备独立像素的比值。

在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr`。

iPhone 6、7、8的实际物理像素是750 x 1334，在开发者工具中我们可以看到：它的设备独立像素是375 x 667，设备像素比dpr为2

e.g. 如果给定一个元素的高度为200px(这里的px指物理像素，非CSS像素)，iphone6的设备像素比dpr = 2，我们给定的height应为200px/2=100dp。

参考文章：

https://juejin.cn/post/6867874227832225805

这篇文章里面有比较详细的列子 可以好好读一下