字体大小根据屏幕尺寸变化
时间: 2023-11-15 21:04:28 浏览: 57
根据提供的引用内容,可以通过设置字体大小来根据屏幕尺寸的变化进行调整。在给定的代码中,使用了calcFontSize()函数来计算字体大小。该函数通过获取屏幕宽度并与预设的基准宽度进行比例计算,然后将计算得到的字体大小应用到页面上。具体的代码如下:
```javascript
(() => {
// 设置字体大小
function calcFontSize() {
const zoom = window.screen.width / 1920; // 基准宽度为1920
const size = zoom * 16; // 基准字体大小为16px
document.documentElement.style.fontSize = size + 'px';
console.log('设置字体大小', size);
}
calcFontSize();
window.onload = () => {
console.log("页面加载完成")
const resize = () => {
calcFontSize();
}
window.onresize = resize;
}
})()
```
这段代码会在页面加载完成后自动计算并设置字体大小,并且在窗口大小改变时重新计算字体大小。通过这种方式,可以根据屏幕尺寸的变化自动调整字体大小,以适应不同的屏幕分辨率。
#### 引用[.reference_title]
- *1* *2* *3* [前端设置页面字体尺寸跟随屏幕大小而进行变化](https://blog.csdn.net/qq_31281245/article/details/127413978)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]