前言
在最初接触前端的时候,就发现屏幕的宽度是不固定的,
而ui设计图是不固定的,开始的时候就没想到很好的布局
现在想想,这是不好的,不能实现良好的布局,不能自适应
其实有很多自适应的布局方式,以前我总是想使用%布局方式,但是发现全部都换算成%太麻烦了,所以总结了对我最满意的布局方式,那就是rem布局方式
rem
<!DOCTYPE html>
<html style="font-size: 10px;">
设置html根字号的大小,不设置为浏览器的默认字号16px(设置为10px吧,整数挺好,也好换算)
<head>
<meta charset="utf-8" />
<title>自适应</title>
</head>
<body>
rem以html根字号的大小为标准(html字号为10px)则1rem=10px
<div style="background: red;width: 1rem;">
1
</div>
<div style="background: bisque;width: 10px;">
2
<div style="background: aqua;width: 2em;">
3
</div>
</div>
</body>
</html>
console.log(document.getElementsByTagName('html')[0].style.fontSize='20px')
setInterval(function(){
console.log(document.body.clientWidth)
document.getElementsByTagName('html')[0].style.fontSize=`${document.body.clientWidth/60}px`
},1000)
但是感觉,无论怎么样的布局都好像不是太满意,有大佬指教一下吗?