当前位置: 首页> 科技> IT业 > 网络做推广_网站域名的安全性_安徽网站关键字优化_谷歌seo网络公司

网络做推广_网站域名的安全性_安徽网站关键字优化_谷歌seo网络公司

时间:2025/7/11 20:17:45来源:https://blog.csdn.net/qq_33894186/article/details/146967316 浏览次数:0次
网络做推广_网站域名的安全性_安徽网站关键字优化_谷歌seo网络公司

1. rem(Root EM)

参照对象

  • 基准:相对于 根元素(<html>)的 font-size 计算。

  • 默认情况下,浏览器的根 font-size 为 16px(即 1rem = 16px),但可通过 CSS 修改:

    html {font-size: 20px; /* 此时 1rem = 20px */
    }

不同分辨率下的表现

  • 变化规则

    • rem 的值 只取决于根元素的 font-size,与视口大小无关。

    • 若根 font-size 固定(如 20px),1rem 永远等于 20px

    • 若根 font-size 动态设置(如通过媒体查询或 JS 根据视口调整),rem 会按比例变化。

  • 常见用法

    /* 动态调整根 font-size(适配移动端) */
    html {font-size: calc(100vw / 375 * 16); /* 基于设计稿宽度 375px */
    }

 

2. vh(Viewport Height)

参照对象

  • 基准:相对于 视口(Viewport)高度的 1%

    • 1vh = 1% 的视口高度(如视口高度为 1000px,则 1vh = 10px)。

不同分辨率下的表现

  • 变化规则

    • vh 的值 随视口高度变化

    • 在移动端,浏览器地址栏的显示/隐藏会动态改变视口高度,导致 vh 值波动(可用 dvh 解决)。

  • 常见用法

    .full-screen {height: 100vh; /* 始终占满视口高度 */
    }

 

3. vw(Viewport Width)

参照对象

  • 基准:相对于 视口(Viewport)宽度的 1%

    • 1vw = 1% 的视口宽度(如视口宽度为 1200px,则 1vw = 12px)。

不同分辨率下的表现

  • 变化规则

    • vw 的值 随视口宽度变化

    • 适用于响应式布局(如替代百分比,避免嵌套元素计算问题)。

  • 常见用法

    .responsive-box {width: 50vw; /* 始终占视口宽度的一半 */
    }

 

 

4. 对比总结

单位参照对象是否随视口变化典型应用场景
rem根元素的 font-size否(除非动态修改根字号)字体大小、间距、整体缩放
vh视口高度全屏布局、高度自适应
vw视口宽度响应式宽度、栅格系统

5. 特殊注意事项

移动端 vh 的问题

  • 问题:在移动端浏览器中,100vh 可能包含地址栏高度,导致内容被遮挡。

  • 解决方案

    • 使用 CSS 新单位 dvh(Dynamic Viewport Height,动态视口高度):

      .mobile-section {height: 100dvh; /* 自动排除地址栏高度 */
      }

    • 或通过 JavaScript 动态计算:

      document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
      .mobile-section {height: calc(var(--vh, 1vh) * 100);
      }

vw 的替代方案

  • 若需避免 vw 计算复杂性,可使用 CSS 容器查询(cqw)或 Flex/Grid 布局。

 

6. 不同分辨率下的计算示例

视口尺寸1rem(根 font-size: 16px1vh(视口高度 900px1vw(视口宽度 1200px
桌面端16px9px12px
移动端竖屏16px6.5px(含地址栏)3.75px(宽度 375px
移动端横屏16px3.75px(高度 375px6.5px(宽度 650px

 

7. 如何选择单位?

  • 全局缩放:用 rem(结合媒体查询动态调整根 font-size)。

  • 视口适配:用 vw/vh(或 dvh 解决移动端问题)。

  • 精确控制:结合 calc() 使用(如 calc(1rem + 1vw))。

通过合理选择单位,可以轻松实现跨设备的响应式布局。

 

关键字:网络做推广_网站域名的安全性_安徽网站关键字优化_谷歌seo网络公司

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: