css html 移动端适配 font-size: 13.33vw rem + vw
#### 使用 `vw` 实现响应式布局
方法一:使用CSS计算功能
这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。/* 根据750宽度的设计稿计算font-size,即1rem = 100px; */ html { font-size: calc(100vw / 7.5); }这种方法的好处是可以在不需要JavaScript的情况下实现响应式设计。
方法二:基于设计稿宽度计算
这种方法是通过手动计算设计稿的宽度与`vw`单位的关系来设置`font-size`的值。/* 基于750宽度的设计稿,1rem = 100px; */ html { font-size: 13.333333333vw; } /* 基于650宽度的设计稿,1rem = 100px; */ html { font-size: 15.38461vw; }
方法三:使用JavaScript动态调整font-size
使用JavaScript动态地调整`font-size`可以更好地控制布局,在特定条件下更改`font-size`。(function (window, document) { let getRem = function () { if (document) { let html = document.documentElement; let width = html.getBoundingClientRect().width > 750 ? 750 : html.getBoundingClientRect().width; let hWidth = width * (750 / 352); html.style.fontSize = Math.ceil(hWidth / 16) + "px"; } }; getRem(); window.onresize = function () { getRem(); } })(window, document);