| 视口单位与字体大小：实现屏幕自适应和字体调整 | 您所在的位置：网站首页 › html调节字体大小 › 视口单位与字体大小：实现屏幕自适应和字体调整 |
视口单位与字体大小：实现屏幕自适应和字体调整
|
需求：实现屏幕自适应和字体调整 目标：根据当前设备的窗口大小来计算并设置根元素的字体大小，以实现页面的自适应效果 简介：文章提供了使用rem单位和em单位的计算案例，并给出了相应的CSS代码和HTML结构示例。此外，还介绍了使用rem单位实现自适应效果的基本步骤，并提供了两种使用JavaScript动态设置根元素字体大小的方法。通过阅读这篇文章，读者可以更好地理解rem和em单位的区别，了解它们在网页布局和自适应设计中的应用，以及如何解决与这些单位相关的常见问题。 搞清楚rem与em区别对比结果如下 rem单位：计算来源：rem单位是相对于根元素（html）的字体大小来计算的。 计算方式：当使用rem单位设置元素的尺寸或字体大小时，会基于根元素的字体大小进行计算。 继承方式：rem单位的值不会继承父元素的字体大小，而是始终相对于根元素的字体大小。 计算案例：如果根元素的字体大小为16px，设置一个元素的宽度为2rem，那么该元素的宽度将等于32px（2 * 16px）。 em单位：计算来源：em单位是相对于元素自身的字体大小来计算的。 计算方式：当使用em单位设置元素的尺寸或字体大小时，会基于父元素的字体大小进行计算。 继承方式：em单位的值会继承父元素的字体大小，可以形成层层递进的效果。 计算案例：如果根元素的字体大小为16px，父元素的字体大小为12px，子元素的字体大小设置为1.5em，那么子元素的字体大小将等于18px（1.5 * 12px）。 总结： rem单位更适合用于全局的布局尺寸定义、方便地实现整体的自适应效果。 em单位更适合用于局部元素的尺寸定义，实现元素之间的相对关系。 案例：在CSS中设置根元素的字体大小： html { font-size: 16px; }在CSS中设置父元素的字体大小： .father { font-size: 12px; }在CSS中设置孩子的字体大小： .child1 { font-size: 1em; } .child2 { font-size: 1rem; }设计html结构 1em == 12px 1rem == 16px结果： rem相对于根元素(即html元素)字体大小的计算值的倍数。 1rem = html的font-size的大小 2rem = html的2*font-size的大小 使用rem单位可以实现网页的自适应效果。rem单位是相对于根元素（html）的字体大小（font-size）来计算的。通过设置根元素的字体大小，可以控制整个页面中rem单位的大小，从而实现自适应效果。 以下是使用rem单位实现自适应的基本步骤： 在CSS中设置根元素的字体大小： html { font-size: 16px; /* 设置根元素的字体大小，可以根据需要进行调整 */ }使用rem单位进行布局： .container { font-size: 1.2rem; /* 使用rem单位设置字体大小 */ } 方式一使用JavaScript动态设置根元素的字体大小： 为了实现响应式的自适应效果，可以结合JavaScript根据屏幕大小动态设置根元素的字体大小。可以使用window.innerWidth获取窗口的宽度，然后根据需要的适配方案计算并设置根元素的字体大小，例如： function setRootFontSize() { var screenWidth = window.innerWidth; // 根据屏幕宽度计算并设置根元素的字体大小 var rootFontSize = screenWidth / 37.5; // 例如，每37.5个像素为1rem，可以根据需要进行调整 document.documentElement.style.fontSize = rootFontSize + 'px'; } // 在窗口大小改变时调用设置根元素字体大小的函数 window.addEventListener('resize', setRootFontSize); // 页面加载完成后初始化设置根元素字体大小 window.addEventListener('DOMContentLoaded', setRootFontSize);通过以上步骤，你可以使用rem单位实现网页的自适应效果。根据实际情况和设计要求，你可以根据需求调整根元素字体大小和其他元素的尺寸，以达到所需的自适应效果。 方法二使用JavaScript动态设置根元素的字体大小 用于设置rem单位的函数。它的作用是根据当前设备的窗口大小来计算并设置根元素的字体大小，以实现页面的自适应效果。 // 设置 rem 函数 function setRem () { // PC端 console.log('非移动设备') // 基准大小 baseSize = 16; let baseApp = baseSize / 375; // 表示375的设计图,使用100PX的默认值 let windowWidth = window.innerWidth; // 当前窗口的宽度 let windowHeight = window.innerHeight; // 当前窗口的高度 // 非正常屏幕下的尺寸换算 let dueH = windowWidth / 375 if (windowHeight < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度 windowWidth = windowHeight /667 } let rem = windowWidth * baseApp; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值 document.documentElement.style.fontSize = rem + "px";//利用DOM去修改值 } // 页面加载完成后初始化设置根元素字体大小、初始化 window.addEventListener('DOMContentLoaded', setRem); // 在窗口大小改变时调用设置根元素字体大小的函数 window.addEventListener('resize', setRem);在函数内部，设置了一个基准大小baseSize，表示在375px设计图下使用的默认字体大小。这个值可以根据实际需求进行调整 获取当前窗口的宽度和高度，并进行相应的计算，以适应不同的屏幕尺寸。在非正常屏幕尺寸下，根据宽度与375的比例重新计算屏幕宽度 最后，根据计算得到的窗口宽度和基准比例，计算出对应的rem值，并将其应用于根元素的字体大小，即修改document.documentElement.style.fontSize的值 效果图片这样就基本上算是完成了，rem的自适应窗口 问题一：rem为什么不会跟随着移动设备的改变而改变rem是可以实现根据根元素的字体大小进行自适应的效果。 虽然你使用rem单位，但是可能未调整根元素的字体大小。 我们可以实现页面内容随着移动设备的改变而自动调整大小的效果。因此，在移动设备的视口大小变化时，我们只需要修改根元素的字体大小，页面中的所有使用rem单位的元素都会相应地进行调整，以适应新的视口大小。这种方式可以简单而有效地实现移动设备上的响应式设计。 问题二：顺便提一下移动端上字体过于小的问题你有可能在创建项目时不小心删掉了一些配置比如html里的 解析： 该标签告诉浏览器使用最新的可用版本来渲染页面，以确保在 Internet Explorer （如 IE8、IE9）浏览器中获得最佳的兼容性和性能。 这个标签对于响应式设计和移动优化的网页非常重要，它可以确保页面在移动设备上以正确的比例和适当的大小进行显示，提供更好的用户体验。 不添加有什么问题？就会变成 F12在点击真机测试有字体问题 加上上述的meta配置 em既然用于继承父元素的字体大小，我们可以使用其特性，做一些事情。 可以参考文章 《自己写一个svg图标组件吧》 创建组件中，有解析为什么要使用em。 vw、vh介绍关于，vw（viewport width）和vh（viewport height）是两种相对于视口大小的长度单位。 单位描述vw表示视口宽度的百分比，1vw 等于视口宽度的 1%。vh表示视口高度的百分比，1vh 等于视口高度的 1%。示例如果视口宽度为 1000px，视口高度为 800px，以下是一些示例：- 宽度为 50vw 的元素，宽度将等于 500px（50% * 1000px）。- 高度为 25vh 的元素，高度将等于 200px（25% * 800px）。优点- 可以实现相对于视口大小的自适应效果，适应不同屏幕尺寸的设备。- 适用于响应式设计，可以根据视口大小调整元素的布局和尺寸。注意- 需要考虑不同设备的视口大小可能存在差异，做好兼容性处理和调试。- 注意浏览器的兼容性，某些旧版本的浏览器可能不支持 vw 和 vh 单位。许多知名的网站和应用程序都使用了vw和vh单位来实现响应式设计。 并确保其内容在各种设备和屏幕尺寸上都能正确显示和调整。它们利用这些单位来调整字体大小、间距、盒模型尺寸等元素的属性，以适应不同的视口大小。 比如：Bilibili、Tencent、JD.com、Alibaba等 关于适配方案，详情看文章h5移动端适配方案《lib-flexible与xxx-px2rem》 |
【本文地址】