微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > em、rem的原理与应用场景、rem/em/vh/vw区别于联系
博主信息
博文 47
粉丝 3
评论 0
访问量 50697
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
em、rem的原理与应用场景、rem/em/vh/vw区别于联系
吳
原创
1298人浏览过

em、rem的原理与应用场景、rem/em/vh/vw区别于联系

1.em、rem的原理与应用

  • 1.px是固定像素，一旦设置了就无法因为适应页面而改变
  • 2.em和rem相对于px更具有灵活性，因为它们长度不是定是的，更适用于响应式布局
    • 2-1.em和rem的区别一句话概括：em相对于父元素，rem相对于html根元素
    • 2-2.rem中的r意思是root（根源）
em盒子模型应用:
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>em的原理与应用</title>
  6.     <style>
  7.         html {
  8.             font-size: 20px;
  9.         }
  10.         /* 盒子模型的响应式 */
  11.         body:first-of-type div:first-of-type {
  12.             /* 1em = 20px */
  13.             font-size: 1em;
  14.             /* 10em * 20px = 200px */
  15.             width: 10em;
  16.             /* 8em * 20px = 160px */
  17.             height: 8em;
  18.             background-color: skyblue;
  19.         }
  21.         /* 因为盒子大小使用了em，所以后面只需要设置字号就可以响应式改变盒子的大小 */
  22.         body:first-of-type div:first-of-type {
  23.             font-size: 0.8em;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div></div>
  29. </body>
  30. </html>
演示截图:

rem定义字号应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>rem定义字号</title>
  7.     <style>
  8.         html {
  9.             /* em的初始值就是（浏览器）用户代理的值，默认就是16px */
  10.             /* 1em = 20px */
  11.             font-size: 1.25em;
  12.             /* 此时 1em = 20px */
  14.             /* 当font-size出现在了html中 */
  15.             /* html叫根元素，一个页面中它是唯一的最大的包含块 */
  16.             /* 所以在html根元素中定义的em大小，可以看成是一个常量，固定的值 */
  17.             /* html所有后代元素，如果想引用html中的字号，就不能 再用em了 */
  18.             /* 因为em具有继承性 */
  19.             /* 此时我们用一个关键词来引用根元素中的字号大小font-size的值 */
  20.             /* 这个关键词就是：rem */
  21.         }
  22.         h1 {
  23.             /* 1.5rem :1.5 * 20px = 30px */
  24.             font-size: 1.5rem;
  25.         }
  26.         h1 span {
  27.             /* 1 * 20px =20px */
  28.             font-size: 1rem;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <h1>hello world <span>你好</span></h1>
  34. </body>
  35. </html>

演示截图

2.rem / em /vh/ vw的区别与联系

  • rem继承根html字号相对字号的固定值
  • em引用当前盒子或继承父级元素或祖先元素的font-size设置，如果都没有设置，则继承html根的字号设置
  • vh/vw视口单位，视口意思就是浏览器的可视区域，不包括地址栏、菜单栏、工具栏、状态栏
    • vh视口的初始包含块的高度百分之一(1/100)
    • vw视口的初识包含块的宽度百分之一(1/100)
    • 视口单位值按视口大小等比改变，主要用于移动端布局
  • vmin/vmax可视口最小/最大
    • width:80vmin / height:80vmin （无论怎么变换页面都是正方形）
    • width:80vmax / height:80vmax 手机横屏应用
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录