分享一个我自用的响应式网站布局方法，非常简单好用。利用JavaScript判断页面宽度，结合rem单位， 实时修改网站尺寸，达到响应式布局方法。
首先前端开发中，样式尺寸单位全部用rem，比如：
- .content{
- width: 8rem;
- border-radius: 0.15rem;
- font-size: 0.95rem;
- letter-spacing: 0.15rem;
- ｝
- <html style="font-size: 100px;">
- <style>
- html{font-size: 100px;}
- </style>
-
- [backcolor=rgb(255, 255, 255)] [/backcolor]<script>
- const doc = document.documentElement
- window.onresize = () => {
- // 获取窗口宽度
- let width = doc.clientWidth
- // 设备宽度 / 设计稿宽度 = 根元素html大小 / 设计稿根元素大小(假设为100px)
- // 假设我们的设计稿宽度为 750px
- if (width >= 1080) {
- doc.style.fontSize = '100px'
- } else {
- doc.style.fontSize = width / 1080 * 100 + 'px'
- }
- console.log(width)
- }
- </script>
