移动端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

<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样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。
方法四：百分比

移动端h5页面自适应

猜你喜欢