移动端页面适配,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以上
剑还未备好,身已在江湖