前端移动端页面怎么用rem布局

Posted 2023-05-17

参考技术A !new function()var a=this;a.width=750,a.fontSize=100,a.widthProportion=function()var b=(document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/a.width;return b>1?1:b,a.changePage=function()document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+a.widthProportion()*a.fontSize+"px !important"),a.changePage(),window.addEventListener("resize",function()a.changePage(),!1);
引入这段js代码，设计图的750px = 7.5rem ，同理10px = 0.1rem
记得在css设置默认字体大小 bodyfont-size: 0.3rem;
举例：.div1width: 7.5rem;height: 1rem;

移动端页面适配，rem布局

移动端页面适配

 

em 根据元素自身的字体大小来计算自己的尺寸

rem root em 根据根节点(html)的字体大小来计算自己的尺寸

                  

适配: 各个移动设备，分辨率大小不一致，使我们的页面在各种分辨率下都显示完好(等比的缩放);

根据屏幕的分辨率

动态的设置html的字体大小，来达到页面等比缩放的功能

 

注意：保证html最终算出来的字体大小 不能小于 12

 

 

在最开始先设置一段js代码，获得屏幕宽度，这段js优先于任何css和js

<script>

(function() {

                   var html = document.querySelector("html");

                   var width = html.getBoundingClientRect().width;

                   html.style.fontSize = width / 16 + "px";

                   //  width / 16  html的字体大小 = 屏幕宽度的16分之一 = 1rem

                   //  270 /

                   //console.log(html.getBoundingClientRect());

         })();

</script>

html.getBoundingClientRect().width; //获得屏幕宽度

 

 

像素比

alert(window.devicePixelRatio); //像素比 像素比为2 用两个像素的大小去显示 1px的内容

// 最好设计图的宽度都保持在 750以上