微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > CSS自适应布局中单位em和rem的区别以及常见的视口(视窗)单位
博主信息
博文 145
粉丝 7
评论 7
访问量 202173
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS自适应布局中单位em和rem的区别以及常见的视口(视窗)单位
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
2040人浏览过

CSS自适应布局中常见的em和rem的区别

1、当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
2、当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。em的值是相对于使用em单位的元素的字体大小；如果当前元素没有设置字体大小，则em默认继承父级的字号大小
3、em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值,单em和rem的参考基准值不同；
4、em和rem总结：

  • rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  • em 单位基于使用他们的元素的字体大小。
  • rem 单位基于 html 元素的字体大小。
  • em 单位可能受任何继承的父元素字体大小影响
  • rem 单位可以从浏览器字体设置中继承字体大小。
  • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  • 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
  • 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 em 或 rem -改用 %。
  • 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

常见的视口单位应用

1、视口单位vh、vw常用用于移动端布局：通常是把视窗口的宽高按100份等分，单位即vh和vw;vh和vm总是与视口的高度和宽度有关。
2、与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小

代码练习

1、代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>rem和em以及视口单位的使用</title>
  8.     <style>
  9.         /* html在谷歌浏览器下默认字体字号为16px */
  10.         .one span{
  11.             font-size:1.5rem;//等于24px,rem的值是以根元素的字体大小为基准的
  12.         }
  13.         .two{
  14.             font-size:2rem;//等于32px
  15.         }
  16.         .two span{
  17.             /* 继承父级的字体字号大小 等同与设置了font-size:2rem;也就是字号设置32px*/
  18.             width: 10em;//10*32px=320px; em的值是以使用em元素的字体大小为基准值的,如果元素没有设置字体大小的值则继承父级的字体的值
  19.             padding:0 1em;;
  20.             background-color: #42B983;
  21.         }
  22.         .three{
  23.             font-size:2em;//实际字号大小:2*16px=32px;
  24.         }
  25.         .three span{
  26.             font-size:2em;//实际字号大小:2*32px=64px;
  27.         }
  28.         /* 通常设置字体用rem,设置宽、高、margin、padding用em;但设置边框强烈建议使用px; */
  29.         .window{
  30.             /* 移动端布局通过视窗的vh和vw来设置盒子的自适应宽高 */
  31.             width: 50vw;
  32.             height:50vh;
  33.             background-color: lightcyan;
  34.             margin:0 auto;
  35.             position:relative;
  36.         }
  37.         .win{
  38.             /* 通过vmin和vmax来设置盒子的宽高，通过vmin设置宽高，总以最短的边来设置宽高，而vmax则是以最长的来设置宽高 */
  39.             width: 25vmax;
  40.             height:25vmax;
  41.             padding: 1vw 1vh;
  42.             background-color: lightgreen;
  43.             position: absolute;
  44.             top:0;
  45.             left: 0;
  46.             bottom:0;
  47.             right:0;
  48.             margin:auto;
  49.         }
  50.         .w{
  51.             width: 15vmin;
  52.             height:15vmin;
  53.             background-color: red;
  54.             position: absolute;
  55.             top:0;
  56.             left: 0;
  57.             bottom:0;
  58.             right:0;
  59.             margin:auto;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64.     <div class="one">
  65.         <span>种业圈</span>
  66.     </div>
  67.     <div class="two">
  68.         <span>种业圈</span>
  69.     </div>
  70.     <div class="three"><span>种业圈</span></div>
  71.     <div class="window">
  72.         <div class="win">
  73.             <div class="w">
  75.             </div>
  76.         </div>
  77.     </div>
  78. </body>
  79. </html>

2、运行结果：

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系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+教程免费学
    微信扫码登录