前端自适应
2020-03-19 本文已影响0人
STUDY_67eb
前端想实现随着网页的大小，网页中的元素也会动态的改变大小。可以通过rem或者em来实现。
由于px是像素值，可以理解为是绝对大小，自适应要是实现的是相对大小；
em是随着同级别下的font-size的大小改变进行改变；
rem是随着<html>根的font-size的大小改变进行改变。
我们暂时选择rem来实现自适应。
思路为，在js中获取网页的宽度，来动态的改变font-size的大小。比如现在对宽度进行24等分，那么实现代码如下：
```
<script>
function placeholderPic(){
var w = document.documentElement.offsetWidth;
// 获取宽度后进行24等分，每一个rem为24分之一
document.documentElement.style.fontSize=w/24+'px';
}
placeholderPic();
// 监听网页改变，一旦改变，就会动态改变其大小
window.onresize=function(){
placeholderPic();
}
</script>
```
