移动端页面适配，rem布局

Posted 2020-08-21

移动端页面适配

 

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以上