移动端页面适配，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以上