手机端web端页面自适应布局，一段代码解决方案

今天药忘吃喽~ 2023-06-04 06:53 2阅读 0赞

如果是手机端页面采用rem的方式布局。r**em相对于HTML根元素的一个相对单位。**

**我们可以根据浏览器的宽度确定他是web端还是移动端。如果是移动端的话就给根元素一个fontsize的大小。其他设置的rem的单位都会是相对于这个根元素的。**

**其实说了那么多就是在页面上加上下面的代码就可以啦**

> <script>  
>     (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 = '16px';  
>             \}else\{  
>                 docEl.style.fontSize = 100 \* (clientWidth / 750) + 'px';  
>             \}  
>         \};  
>         recalc()  
>         if (!doc.addEventListener) return;  
>         win.addEventListener(resizeEvt, recalc, false);  
>         doc.addEventListener('DOMContentLoaded', recalc, false);  
>     \})(document, window);  
>     </script>

我在上面使用是750.当宽度大于750说明是web页面。他的根元素的fontSize是16px。如果是小于750说明是移动端。根元素的fontSize就是100\*(页面宽度/750).这里的750是iphone6的两倍。一般是看设计图的宽来的。因为设计移动端的页面，设计一般都是用的750的宽。如果设计图是按照640（iphone5的两倍）那么上面的750都改成640就可以啦。