博客列表 >描述em,rem的个人原理与应用场景和演示 , 分析 rem / em /vh/ vw的区别与联系

描述em,rem的个人原理与应用场景和演示 , 分析 rem / em /vh/ vw的区别与联系

庄周梦蝶
庄周梦蝶原创
2020年12月23日 19:04:55686浏览

描述em/rem的原理应用场景和演示

  1. em是继承与父级和本身的font-size值,会跟随font-size值的设置一直改变,不好控制,可用于来设置响应式布局和需要跟随大小变化而变化的值的单位
  2. rem是根据与根属性(html)的font-size的值,要是没有设置的话会根据根属性继承浏览器的值,一般是16px,来设置,主要用于文字、标题和需要能把握固定尺寸的值的单位
    1. <style>
    2. <style>
    3. h2:nth-of-type(1){
    4. font-size:1.2em;
    5. 此时字体的默认值为16px,第一行为1.2倍的em,就是1.2x16=19.2px
    6. }
    7. h2:nth-of-type(2){
    8. 此时字体的默认值为16px,第一行为1.2倍的em,就是1.3x16=20.8px
    9. font-size:1.3em;
    10. }
    11. span{
    12. 因为他是第二个h2的子元素,所以继承父级的字号为20.8px,它本身字号得20.8x0.8=16.64px
    13. font-size:0.8em;
    14. 在这个属性上面设置过字号了,所以它继承了等于16.64px
    15. width:1em;
    16. }
    17. </style>
    18. <body>
    19. <h2>你好中文网</h2>
    20. <h2>你好<span>中文网</span></h2>
    21. </body>

  1. <style>
  2. html {
  3. font-size: 20px;
  4. }
  5. .panel h2{
  6. 给标题设置为1.3倍的字体,就是20x1.3=26px
  7. font-size: 1.3rem;
  8. }
  9. .panel-body{
  10. 给文字设置为0.8倍的字体,就是20x0.8=16px
  11. font-size: 0.8rem;
  12. 首行缩进2个字,就是2x16=32
  13. text-indent: 2em;
  14. }
  15. </style>
  16. <html>
  17. <body>
  18. <div class="panel">
  19. <h2>嫦娥五号成功返回地球后,世界各国态度大不同</h2>
  20. <div class="panel-body">
  21. <p>综合外媒报道,中国“嫦娥五号”返回器携带月球表面土石样本于当地时间星期四12月17日凌晨,成功在内蒙古四子王旗预定区域安全着陆。而上一次人类将月球样本带回地球还是40多年前,中国也成为全球第三个实现月球采样返回能力的国家。世界各个航天大国对此反应不一,有的点赞祝贺,有的毫无表示,还有的阴阳怪气。
  22. </p>
  23. </div>
  24. </div>
  25. </body>
  26. </html>

vh和vw,vmia,vmax

vh和vw就是根据屏幕来写的百分比,vmia就是最小不能小于屏幕的多少百分比,vmax就是最大不能大于屏幕的多少百分比

  1. <style>
  2. .b {
  3. width: 50vw;
  4. height: 50vh;
  5. background-color: blue;
  6. }
  7. </style>
  8. <body>
  9. <div class="b"></div>
  10. </body>

块级元素会根据你屏幕的大小来占据你50%的高和50%宽

  1. <style>
  2. .b {
  3. width: 50vmax;
  4. height: 50vmax;
  5. background-color: blue;
  6. }
  7. </style>
  8. <body>
  9. <div class="b"></div>
  10. </body>

因为这个是占据屏幕最长边的百分比,所以会选择最长的边,然后来占据其百分之50的地方

  1. <style>
  2. .b {
  3. width: 50vmax;
  4. height: 50vmax;
  5. background-color: blue;
  6. }
  7. </style>
  8. <body>
  9. <div class="b"></div>
  10. </body>

因为这个是占据屏幕最短边的百分比,所以会选择最短的边,然后来占据其百分之50的地方

分析 rem / em /vh/ vw的区别与联系

vh和vw适合适用在改变页面大小里面的块的尺寸,可以设置其来适应窗口的大小,rem和em可以适用于在改变页面大小里面的块的字体的尺寸,两者结合可以设计出智适应网页

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议